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

type InputProps = {
  title: string;
  desc: string;
  Icon: FC<{ color: string; backgroundColor: string }>;
  onChange: TextFieldProps["onChange"];
  onChangePhone?: (phone: string) => void;
  id: string;
  isPhone?: boolean;
  type?: HTMLInputTypeAttribute;
  value?: string;
};

const TextField = MuiTextField as unknown as FC<TextFieldProps>;
let first = true;

function phoneChange(e: ChangeEvent<HTMLInputElement>, mask: string) {
  const masked = IMask.createMask({
    mask: "+7 (000) 000-00-00",
    // ...and other options
  });
  masked.value = e.target.value;
  const a = IMask.pipe(e.target.value, {
    mask,
  });
  return a || "";
}

export const CustomInput = ({ title, desc, Icon, onChange, onChangePhone, isPhone, type, value }: InputProps) => {
  const theme = useTheme();
  const isMobile = useRootContainerSize() < 600;
  const { settings } = useQuizStore();
  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}
        //@ts-ignore
        onChange={(e: ChangeEvent<HTMLInputElement>) =>
          isPhone ? onChangePhone?.(phoneChange(e, mask)) : onChange?.(e)
        }
        type={isPhone ? "tel" : type}
        value={value}
        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>
  );
};