import {
    Box,
    InputAdornment,
    TextField as MuiTextField,
    TextFieldProps,
    Typography,
    useTheme
} from "@mui/material";
import {useRootContainerSize} from "@contexts/RootContainerWidthContext.ts";
import {useQuizData} 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 } = useQuizData();
    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>
    );
};