import { Box, InputAdornment, TextField as MuiTextField, TextFieldProps, Typography, useTheme } from "@mui/material";
import { useRootContainerSize } from "@contexts/RootContainerWidthContext.ts";
import { useQuizSettings } from "@contexts/QuizDataContext.ts";
import { useIMask } from "react-imask";
import { quizThemes } from "@utils/themes/Publication/themePublication.ts";
import { FC, useState } from "react";
import { CountrySelector } from "@/components/ViewPublicationPage/ContactForm/CustomInput/CountrySelector/CountrySelector.tsx";
import { phoneMasksByCountry } from "@utils/phoneMasksByCountry.tsx";

type InputProps = {
  title: string;
  desc: string;
  Icon: FC<{ color: string; backgroundColor: string }>;
  onChange: TextFieldProps["onChange"];
  id: string;
  isPhone?: boolean;
};

const TextField = MuiTextField as unknown as FC<TextFieldProps>;

export const CustomInput = ({ title, desc, Icon, onChange, isPhone }: InputProps) => {
  const theme = useTheme();
  const isMobile = useRootContainerSize() < 600;
  const { settings } = useQuizSettings();
  const [mask, setMask] = useState(phoneMasksByCountry["RU"][1]);
  const { ref } = useIMask({ mask });
  return (
    <Box m="10px 0">
      <Typography mb="7px" color={theme.palette.text.primary} fontSize={"16px"}>
        {title}
      </Typography>

      <TextField
        inputRef={isPhone ? ref : null}
        onChange={onChange}
        sx={{
          width: isMobile ? "100%" : "390px",
          backgroundColor: theme.palette.background.default,
          fontSize: "16px",
          "& .MuiOutlinedInput-notchedOutline": {
            borderColor: "#9A9AAF80",
            borderRadius: "12px",
          },
          "& .MuiInputBase-root": {
            paddingLeft: 0,
          },
          "& .MuiOutlinedInput-input": {
            paddingLeft: "10px",
          },
          "& .MuiOutlinedInput-root": {
            "&:hover fieldset": {
              borderColor: theme.palette.primary.main,
            },
          },
        }}
        placeholder={desc}
        InputProps={{
          startAdornment: (
            <InputAdornment position="start">
              <Icon color="gray" backgroundColor={quizThemes[settings.cfg.theme].isLight ? "#F2F3F7" : "#F2F3F71A"} />
            </InputAdornment>
          ),
          endAdornment: (
            <InputAdornment position="end">{isPhone && <CountrySelector setMask={setMask} />}</InputAdornment>
          ),
        }}
      />
    </Box>
  );
};