import {
    Box,
    FormControl,
    IconButton,
    InputAdornment,
    InputLabel,
    MenuItem,
    OutlinedInput,
    Select,
    Typography
} from "@mui/material";
import {useTranslations} from "next-intl";
import useProvince from "@/lib/app/hooks/useProvince";
import ClearIcon from '@mui/icons-material/Clear';

const provinceList = [
    {name: "قزوین", id: 1},
    {name: "تبریز", id: 2},
    {name: "مشهد", id: 3}
]

const ProvinceFilter = ({formik, multiple, setFilteredText}) => {
    const {errorProvinceList, isLoadingProvinceList, provinceList} = useProvince();
    const t = useTranslations();
    const provinceChange = (event) => {
        const {target: {value}} = event;
        formik.setFieldValue('province_id', value);
        if (Array.isArray(value)) {
            const province_names = [];
            value.map((item) => {
                province_names.push(provinceList.find(province => province.id === item).name)
            })
            setFilteredText(prevState => ({
                ...prevState,
                province: province_names.length !== 0 ? `${t("filters.provinces")}: ${province_names.join(' , ')}` : ""
            }));
        } else {
            const selectedProvince = provinceList.find(province => province.id === value);
            setFilteredText(prevState => ({
                ...prevState,
                province: `${t("filters.province")}: ${selectedProvince.name}`
            }));
        }
    };
    const needAdorment = multiple
        ? formik.values.province_id.length === 0 :
        formik.values.province_id === "";
    return (
        <FormControl sx={{width: 300, mx: 1, my: {xs: 1, lg: 0}}}>
            <InputLabel size="small">{t("filters.choose_province")}</InputLabel>
            <Select
                name="province_id"
                multiple={multiple}
                size="small"
                variant="outlined"
                value={formik.values.province_id}
                onChange={provinceChange}
                onBlur={formik.handleBlur("province_id")}
                input={<OutlinedInput label={t("filters.choose_province")}/>}
                disabled={isLoadingProvinceList || errorProvinceList}
                renderValue={multiple ? (selected) => (
                    <Box sx={{
                        display: 'flex', gap: 0.7, overflow: "hidden",
                        width: '100%', pr: 4
                    }}>
                        {selected.map((value) => {
                            const selectedProvince = provinceList.find(province => province.id === value);
                            return (
                                <Typography key={value} variant="button">
                                    {selectedProvince ? selectedProvince.name : ''}
                                </Typography>
                            );
                        })}
                    </Box>
                ) : undefined}
                endAdornment={
                    !needAdorment ?
                        <InputAdornment position="end" sx={{mr: 2}}>
                            <IconButton
                                onClick={() => {
                                    multiple ? formik.setFieldValue('province_id', []) : formik.setFieldValue('province_id', "")
                                    setFilteredText(prevState => ({...prevState, province: t("filters.all_provinces")}))
                                }}
                                size="small">
                                <ClearIcon/>
                            </IconButton>
                        </InputAdornment> : null
                }
            >
                {isLoadingProvinceList ? (
                    <MenuItem>
                        {t("filters.text_field_loading_provinces_list")}
                    </MenuItem>
                ) : errorProvinceList ? (
                    <MenuItem>
                        {t("filters.text_field_error_fetching_provinces")}
                    </MenuItem>
                ) : (
                    provinceList.map((item) => (
                        <MenuItem key={item.id} value={item.id}>
                            {item.name}
                        </MenuItem>
                    ))
                )}
            </Select>
        </FormControl>
    )
};

export default ProvinceFilter;