import { Controller } from "react-hook-form";
import MuiDatePicker from "@/core/components/MuiDatePicker";
import React from "react";
import { FormControl, FormHelperText, InputLabel, LinearProgress, MenuItem, Select, Typography } from "@mui/material";
import useProvinces from "@/lib/hooks/useProvince";

const SelectProvince = ({ control }) => {
    const { provinces, loadingProvinces, errorProvinces } = useProvinces();
    return (
        <Controller
            name="province_id"
            control={control}
            render={({ field, fieldState: { error } }) => (
                <FormControl error={!!error} size="small" fullWidth>
                    <InputLabel id="demo-error-label">استان</InputLabel>
                    <Select
                        {...field}
                        labelId="demo-error-label"
                        id="province_id"
                        value={loadingProvinces ? "loading" : field.value || ""}
                        label="استان"
                        onChange={field.onChange}
                    >
                        {loadingProvinces ? (
                            <MenuItem value={"loading"}>در حال بارگذاری...</MenuItem>
                        ) : errorProvinces ? (
                            <MenuItem value={"error"}>خطا در بارگذاری</MenuItem>
                        ) : (
                            [
                                <MenuItem key="-1" value={"-1"}>
                                    کل کشور
                                </MenuItem>,
                                ...provinces.map((province) => (
                                    <MenuItem key={province.id} value={province.id}>
                                        {province.name_fa}
                                    </MenuItem>
                                )),
                            ]
                        )}
                    </Select>
                    {error && <FormHelperText>{error.message}</FormHelperText>}
                </FormControl>
            )}
        />
    );
};
export default SelectProvince;