import { MenuItem, Select, SelectChangeEvent, useTheme } from "@mui/material";
import { Dispatch, FC, SetStateAction, useState } from "react";
import { phoneMasksByCountry } from "@utils/phoneMasksByCountry.tsx";
import { Value } from "react-phone-number-input";

type CountrySelectorProps = {
  setMask: Dispatch<SetStateAction<string>>;
};

export const CountrySelector: FC<CountrySelectorProps> = ({ setMask }) => {
  const theme = useTheme();
  const [country, setCountry] = useState("RU");

  const handleChange = (e: SelectChangeEvent<Value>) => {
    setCountry(e.target.value);
    setMask(phoneMasksByCountry[e.target.value][1]);
  };
  return (
    <Select
      //@ts-ignore
      value={country}
      onChange={handleChange}
      renderValue={(value) => value}
      // autoComplete={true}
      MenuProps={{
        PaperProps: {
          style: {
            backgroundColor: theme.palette.background.default,
            borderRadius: "12px",
            scrollbarWidth: "none",
          },
        },
      }}
      sx={{
        minWidth: 50,
        backgroundColor: theme.palette.background.default,
        "& .MuiSelect-select": {
          paddingLeft: "5px",
          paddingRight: "5px",
          color: "gray",
          fontSize: "12px",
          border: "none",
        },
        "& .MuiOutlinedInput-notchedOutline": {
          border: "none",
        },
        "&:hover .MuiOutlinedInput-notchedOutline": {
          border: "none",
        },
        "&:hover:before": {
          border: "none",
        },
        "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
          border: "none",
        },
        "&.Mui-focused:hover .MuiOutlinedInput-notchedOutline": {
          border: "none",
        },
      }}
    >
      {Object.keys(phoneMasksByCountry).map((countryCode) => {
        return <MenuItem value={countryCode}>{phoneMasksByCountry[countryCode][0]}</MenuItem>;
      })}
    </Select>
  );
};
