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, HTMLInputTypeAttribute, 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;
  type?: HTMLInputTypeAttribute;
};

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

export const CustomInput = ({ title, desc, Icon, onChange, isPhone, type }: 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}
        type={type}
        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>
  );
};
