import LtrTextField from "@/core/components/LtrTextField";
import StyledForm from "@/core/components/StyledForm";
import { SET_INQUIRE_PRIVACY_FENCING } from "@/core/utils/routes";
import useRequest from "@/lib/hooks/useRequest";
import { Autocomplete, Box, Button, Chip, DialogActions, DialogContent, Fade, Grid, InputAdornment, Stack, TextField, Typography } from "@mui/material";
import { DatePicker, LocalizationProvider, faIR } from "@mui/x-date-pickers";
import { AdapterDateFnsJalali } from "@mui/x-date-pickers/AdapterDateFnsJalali";
import moment from "jalali-moment";
import { Controller, useForm } from "react-hook-form";
import LocationOnMap from "./LocationOnMap";

const CreateForm = ({ handleClose, mutate }) => {
    const { control, watch, register, handleSubmit, setValue } = useForm({
        defaultValues: {
            dabirkhaneh_number: '',
            nameh_date: moment(),
            nameh_date_fa: '',
            marjae_pasokh: '',
            motaghazi_is_legal_id: null,
            motaghazi_is_legal: '',
            motaghazi_type_id: '',
            motaghazi_type: null,
            motaghazi_firstname: '',
            motaghazi_lastname: '',
            national_id: '',
            shenase_melli: '',
            tel_number: '',
            mobile_number: '',
            address: '',
            edare_kol_id: null,
            edare_kol: '',
            edare_shahri_id: null,
            edare_shahri: '',
            rah_type_id: null,
            rah_type: '',
            name_mehvar_id: '',
            name_mehvar_fa: null,
            mizan_harim: null,
            arze_navar: null,
            samt_id: null,
            samt: '',
            kilometr: '',
            lat: '',
            lon: '',
            zone: null,
            karbari_type_id: null,
            karbari_type: '',
            tarh_title: '',
            masahat_zirbana: '',
            ehdasat_type_id: [],
            ehdasat_type: '',
            divarkeshi_distance: '',
            mostahadesat_distance: '',
            mahale_ejra_id: null,
            mahale_ejra: '',
            traffic_id: null,
            traffic: '',
            vaziat_eghtesadi_id: null,
            vaziat_eghtesadi: '',
            has_access_id: null,
            has_access: '',
            shomare_estelam_harim: '',
            max_month: '',
            max_day: '',
            shomare_tahaodname: '',
            shomare_daftarkhaneh: '',
            description: '',
            ronevesht: '',
        }
    });
    const request = useRequest()

    const onSubmit = async (data) => {
        const formData = new FormData()
        formData.append('dabirkhaneh_number', data.dabirkhaneh_number)
        formData.append('nameh_date', data.nameh_date.format('YYYY-MM-DD'))
        formData.append('nameh_date_fa', data.nameh_date)
        formData.append('marjae_pasokh', data.marjae_pasokh)
        formData.append('motaghazi_is_legal_id', data.motaghazi_is_legal_id)
        formData.append('motaghazi_is_legal', data.motaghazi_is_legal_id)
        formData.append('motaghazi_type_id', 1)
        formData.append('motaghazi_type', data.motaghazi_type)
        formData.append('motaghazi_firstname', data.motaghazi_firstname)
        formData.append('motaghazi_lastname', data.motaghazi_lastname)
        formData.append('national_id', data.national_id)
        formData.append('shenase_melli', data.national_id)
        formData.append('tel_number', data.tel_number)
        formData.append('mobile_number', data.mobile_number)
        formData.append('address', data.address)
        formData.append('edare_kol_id', data.edare_kol_id)
        formData.append('edare_kol', data.edare_kol_id)
        formData.append('edare_shahri_id', data.edare_shahri_id)
        formData.append('edare_shahri', data.edare_shahri_id)
        formData.append('rah_type_id', data.rah_type_id)
        formData.append('rah_type', data.rah_type_id)
        formData.append('name_mehvar_id', 1)
        formData.append('name_mehvar_fa', data.name_mehvar_id)
        formData.append('mizan_harim', data.mizan_harim)
        formData.append('arze_navar', data.arze_navar)
        formData.append('samt_id', data.samt_id)
        formData.append('samt', data.samt_id)
        formData.append('kilometr', data.kilometr)
        formData.append('lat', data.lat)
        formData.append('lon', data.lon)
        formData.append('zone', data.zone)
        formData.append('karbari_type_id', data.karbari_type_id)
        formData.append('karbari_type', data.karbari_type_id)
        formData.append('tarh_title', data.tarh_title)
        formData.append('masahat_zirbana', data.masahat_zirbana)
        formData.append('ehdasat_type_id', data.ehdasat_type_id.join("|"))
        formData.append('ehdasat_type', data.ehdasat_type_id.join("|"))
        formData.append('divarkeshi_distance', data.divarkeshi_distance)
        formData.append('mostahadesat_distance', data.mostahadesat_distance)
        formData.append('mahale_ejra_id', data.mahale_ejra_id)
        formData.append('mahale_ejra', data.mahale_ejra)
        formData.append('traffic_id', data.traffic_id)
        formData.append('traffic', data.traffic_id)
        formData.append('vaziat_eghtesadi_id', data.vaziat_eghtesadi_id)
        formData.append('vaziat_eghtesadi', data.vaziat_eghtesadi)
        formData.append('has_access_id', data.has_access_id)
        formData.append('has_access', data.has_access_id)
        formData.append('shomare_estelam_harim', data.shomare_estelam_harim)
        formData.append('max_month', data.max_month)
        formData.append('max_day', data.max_day)
        formData.append('shomare_tahaodname', data.shomare_tahaodname)
        formData.append('shomare_daftarkhaneh', data.shomare_daftarkhaneh)
        formData.append('description', data.description)
        formData.append('ronevesht', data.ronevesht)

        try {
            await request(SET_INQUIRE_PRIVACY_FENCING, 'post', { data: formData })
            handleClose()
            mutate()
        } catch (error) {

        }
    };

    return (
        <LocalizationProvider
            dateAdapter={AdapterDateFnsJalali}
            localeText={faIR.components.MuiLocalizationProvider.defaultProps.localeText}
        >
            <DialogContent>
                <StyledForm onSubmit={handleSubmit(onSubmit)} id={'InquiryPrivacyFencingCreateForm'}>
                    <Grid container columns={{ xs: 1, sm: 2, md: 3 }} spacing={4}>
                        <Grid item xs={1}>
                            <LtrTextField autoComplete="off"  {...register('dabirkhaneh_number')} label="شماره دبیرخانه درخواست *" size="small" fullWidth type="tel" />
                        </Grid>
                        <Grid item xs={1}>
                            <Controller
                                name="nameh_date"
                                control={control}
                                render={({ field: { onChange, value } }) => (
                                    <DatePicker
                                        value={value.toDate()}
                                        onChange={(newValue) => onChange(moment(newValue))}
                                        label="تاریخ نامه درخواست *"
                                        slotProps={{
                                            textField: { fullWidth: true, size: "small", autoComplete: 'off' },
                                        }}
                                    />
                                )}
                            />
                        </Grid>
                        <Grid item xs={1}>
                            <TextField autoComplete="off"  {...register('marjae_pasokh')} label="مرجع درخواست کننده پاسخ به استعلام" size="small" fullWidth />
                        </Grid>
                        <Grid item xs={1}>
                            <Controller
                                name="motaghazi_is_legal_id"
                                control={control}
                                render={({ field: { onChange, value } }) => (
                                    <Autocomplete
                                        size="small"
                                        disablePortal
                                        value={value}
                                        onChange={(event, newValue) => {
                                            onChange(newValue)
                                        }}
                                        options={["حقوقی", "حقیقی"]}
                                        renderInput={(params) => <TextField autoComplete="off" fullWidth {...params} label="متقاضی *" />}
                                    />
                                )}
                            />
                        </Grid>
                        <Grid item xs={1}>
                            <Fade in={watch('motaghazi_is_legal_id') === 'حقوقی'} mountOnEnter={true} unmountOnExit={true}>
                                <Box>
                                    <Controller
                                        name="motaghazi_type"
                                        control={control}
                                        render={({ field: { onChange, value } }) => (
                                            <Autocomplete
                                                size="small"
                                                disablePortal
                                                value={value}
                                                onChange={(event, newValue) => {
                                                    onChange(newValue)
                                                }}
                                                options={["دولتی", "خصوصی"]}
                                                renderInput={(params) => <TextField autoComplete="off" fullWidth {...params} label="نوع متقاضی *" />}
                                            />
                                        )}
                                    />
                                </Box>
                            </Fade>
                        </Grid>
                        <Grid item xs={1}></Grid>
                        <Grid item xs={1}>
                            <TextField autoComplete="off" {...register('motaghazi_firstname')} label="نام متقاضی *" size="small" fullWidth />
                        </Grid>
                        <Grid item xs={1}>
                            <Fade in={watch('motaghazi_is_legal_id') === 'حقیقی'} mountOnEnter={true} unmountOnExit={true}>
                                <TextField autoComplete="off" {...register('motaghazi_lastname')} label="نام خانوادگی متقاضی *" size="small" fullWidth />
                            </Fade>
                        </Grid>
                        <Grid item xs={1}>
                            <LtrTextField autoComplete="off" {...register('national_id')} label="کد ملی/شناسه ملی *" size="small" fullWidth type="tel" />
                        </Grid>
                        <Grid item xs={1}>
                            <LtrTextField autoComplete="off"  {...register('tel_number')} label="تلفن" size="small" fullWidth type="tel" />
                        </Grid>
                        <Grid item xs={1}>
                            <Fade in={watch('motaghazi_type') !== 'دولتی' || watch('formik.values.motaghazi_is_legal_id') === 'حقیقی'} mountOnEnter={true} unmountOnExit={true}>
                                <LtrTextField autoComplete="off"  {...register('mobile_number')} label="تلفن همراه *" size="small" fullWidth type="tel" />
                            </Fade>
                        </Grid>
                        <Grid item xs={1}>
                            <TextField autoComplete="off"  {...register('address')} label="آدرس *" size="small" fullWidth />
                        </Grid>
                        <Grid item xs={1}>
                            <Controller
                                name="edare_kol_id"
                                control={control}
                                render={({ field: { onChange, value } }) => (
                                    <Autocomplete
                                        size="small"
                                        disablePortal
                                        value={value}
                                        onChange={(event, newValue) => {
                                            onChange(newValue)
                                        }}
                                        options={["تهران"]}
                                        renderInput={(params) => (
                                            <TextField autoComplete="off"
                                                fullWidth
                                                {...params}
                                                label="اداره كل راهداری و حمل و نقل جاده ای *"
                                            />
                                        )}
                                    />
                                )}
                            />
                        </Grid>
                        <Grid item xs={1}>
                            <Controller
                                name="edare_shahri_id"
                                control={control}
                                render={({ field: { onChange, value } }) => (
                                    <Autocomplete
                                        size="small"
                                        disablePortal
                                        value={value}
                                        onChange={(event, newValue) => {
                                            onChange(newValue)
                                        }}
                                        options={["تهران"]}
                                        renderInput={(params) => <TextField autoComplete="off" fullWidth {...params} label="اداره شهرستان *" />}
                                    />
                                )}
                            />
                        </Grid>
                        <Grid item xs={1}>
                            <Controller
                                name="rah_type_id"
                                control={control}
                                render={({ field: { onChange, value } }) => (
                                    <Autocomplete
                                        size="small"
                                        disablePortal
                                        value={value}
                                        onChange={(event, newValue) => {
                                            onChange(newValue)
                                        }}
                                        options={["آزاد راه", "بزرگراه", 'راه فرعی درجه 3']}
                                        renderInput={(params) => <TextField autoComplete="off" fullWidth {...params} label="نوع راه *" />}
                                    />
                                )}
                            />
                        </Grid>
                        <Grid item xs={1}>
                            <Controller
                                name="name_mehvar_fa"
                                control={control}
                                render={({ field: { onChange, value } }) => (
                                    <Autocomplete
                                        size="small"
                                        disablePortal
                                        value={value}
                                        onChange={(event, newValue) => {
                                            onChange(newValue)
                                        }}
                                        options={["سایر"]}
                                        renderInput={(params) => <TextField autoComplete="off" fullWidth {...params} label="نام محور *" />}
                                    />
                                )}
                            />
                        </Grid>
                        <Grid item xs={1}>
                            <Fade in={watch('name_mehvar_fa') === "سایر"} mountOnEnter={true} unmountOnExit={true}>
                                <TextField autoComplete="off" label="سایر محورها" size="small" fullWidth />
                            </Fade>
                        </Grid>
                        <Grid item xs={1}>
                            <Controller
                                name="samt_id"
                                control={control}
                                render={({ field: { onChange, value } }) => (
                                    <Autocomplete
                                        size="small"
                                        disablePortal
                                        value={value}
                                        onChange={(event, newValue) => {
                                            onChange(newValue)
                                        }}
                                        options={["چپ", "راست"]}
                                        renderInput={(params) => <TextField autoComplete="off" fullWidth {...params} label="سمت *" />}
                                    />
                                )}
                            />
                        </Grid>
                        <Grid item xs={1}>
                            <Controller
                                name="mizan_harim"
                                control={control}
                                render={({ field: { onChange, value } }) => (
                                    <Autocomplete
                                        size="small"
                                        disablePortal
                                        value={value}
                                        onChange={(event, newValue) => {
                                            onChange(newValue)
                                        }}
                                        options={["12.5", "17.5"]}
                                        renderInput={(params) => <TextField autoComplete="off" fullWidth {...params} label="میزان حریم *" />}
                                    />
                                )}
                            />
                        </Grid>
                        <Grid item xs={1}>
                            <Fade in={watch('rah_type_id') !== 'راه فرعی درجه 3'} mountOnEnter={true} unmountOnExit={true}>
                                <Box>
                                    <Controller
                                        name="arze_navar"
                                        control={control}
                                        render={({ field: { onChange, value } }) => (
                                            <Autocomplete
                                                size="small"
                                                disablePortal
                                                value={value}
                                                onChange={(event, newValue) => {
                                                    onChange(newValue)
                                                }}
                                                options={["15", "30"]}
                                                renderInput={(params) => <TextField autoComplete="off" fullWidth {...params} label="عرض نوار تاسیساتی زیربنایی *" />}
                                            />
                                        )}
                                    />
                                </Box>
                            </Fade>
                        </Grid>
                        <Grid item xs={1}>
                            <LtrTextField autoComplete="off"  {...register('kilometr')} label="كيلومتر *" size="small" fullWidth type="tel" />
                        </Grid>
                        <Grid item xs={1} sm={2} sx={{ height: 300 }}>
                            <LocationOnMap setValue={setValue} />
                        </Grid>
                        <Grid item xs={1}>
                            <Stack spacing={3}>
                                <LtrTextField autoComplete="off"  {...register('lat')} label="عرض جغرافیایی" size="small" fullWidth disabled={true} />
                                <LtrTextField autoComplete="off"  {...register('lon')} label="طول جغرافیایی" size="small" fullWidth disabled={true} />
                                <Controller
                                    name="zone"
                                    control={control}
                                    render={({ field: { onChange, value } }) => (
                                        <Autocomplete
                                            size="small"
                                            disablePortal
                                            value={value}
                                            onChange={(event, newValue) => {
                                                onChange(newValue)
                                            }}
                                            options={["38", "39"]}
                                            renderInput={(params) => <TextField autoComplete="off" fullWidth {...params} label="Zone *" />}
                                        />
                                    )}
                                />
                            </Stack>
                        </Grid>
                        <Grid item xs={1}>
                            <Controller
                                name="karbari_type_id"
                                control={control}
                                render={({ field: { onChange, value } }) => (
                                    <Autocomplete
                                        size="small"
                                        disablePortal
                                        value={value}
                                        onChange={(event, newValue) => {
                                            onChange(newValue)
                                        }}
                                        options={["اتاقک نگهبانی", "دولتی"]}
                                        renderInput={(params) => <TextField autoComplete="off" fullWidth {...params} label="نوع کاربری *" />}
                                    />
                                )}
                            />
                        </Grid>
                        <Grid item xs={1}>
                            <TextField autoComplete="off" {...register('tarh_title')} label="عنوان طرح *" size="small" fullWidth />
                        </Grid>
                        <Grid item xs={1}>
                            <LtrTextField autoComplete="off" {...register('masahat_zirbana')} label="مساحت زیربنا" size="small" fullWidth type="tel" InputProps={{
                                endAdornment: <InputAdornment position="end">
                                    مترمربع</InputAdornment>,
                            }} />
                        </Grid>
                        <Grid item xs={1}>
                            <Controller
                                name="ehdasat_type_id"
                                control={control}
                                render={({ field: { onChange, value } }) => (
                                    <Autocomplete
                                        multiple
                                        size="small"
                                        disablePortal
                                        value={value}
                                        onChange={(event, newValue) => {
                                            onChange(newValue)
                                        }}
                                        renderTags={(value, getTagProps) =>
                                            value.map((option, index) => {
                                                const { key, ...tagProps } = getTagProps({ index });
                                                return (
                                                    <Chip label={option} key={key} size="small" {...tagProps} />
                                                );
                                            })
                                        }
                                        options={["تعمیرات", "احداث بنا"]}
                                        renderInput={(params) => <TextField autoComplete="off" fullWidth {...params} label="نوع احداثات *" />}
                                    />
                                )}
                            />
                        </Grid>
                        <Grid item xs={1}>
                            <LtrTextField autoComplete="off"  {...register('divarkeshi_distance')} label="فاصله دیوارکشی از آکس محور" size="small" fullWidth type="tel" InputProps={{
                                endAdornment: <InputAdornment position="end">متر</InputAdornment>,
                            }} />
                        </Grid>
                        <Grid item xs={1}>
                            <LtrTextField autoComplete="off" {...register('mostahadesat_distance')} label="فاصله مستحدثات از آکس محور" size="small" fullWidth type="tel" InputProps={{
                                endAdornment: <InputAdornment position="end">متر</InputAdornment>,
                            }} />
                        </Grid>
                        <Grid item xs={1}>
                            <Controller
                                name="mahale_ejra_id"
                                control={control}
                                render={({ field: { onChange, value } }) => (
                                    <Autocomplete
                                        size="small"
                                        disablePortal
                                        value={value}
                                        onChange={(event, newValue) => {
                                            onChange(newValue)
                                        }}
                                        options={["داخل حریم"]}
                                        renderInput={(params) => <TextField autoComplete="off" fullWidth {...params} label="محل اجرا" />}
                                    />
                                )}
                            />
                        </Grid>
                        <Grid item xs={1}>
                            <Controller
                                name="traffic_id"
                                control={control}
                                render={({ field: { onChange, value } }) => (
                                    <Autocomplete
                                        size="small"
                                        disablePortal
                                        value={value}
                                        onChange={(event, newValue) => {
                                            onChange(newValue)
                                        }}
                                        options={["سبک (ضریب ۱)"]}
                                        renderInput={(params) => <TextField autoComplete="off" fullWidth {...params} label="میزان ترافیک *" />}
                                    />
                                )}
                            />
                        </Grid>
                        <Grid item xs={1}>
                            <Controller
                                name="vaziat_eghtesadi_id"
                                control={control}
                                render={({ field: { onChange, value } }) => (
                                    <Autocomplete
                                        size="small"
                                        disablePortal
                                        value={value}
                                        onChange={(event, newValue) => {
                                            onChange(newValue)
                                        }}
                                        options={["تست"]}
                                        renderInput={(params) => <TextField autoComplete="off" fullWidth {...params} label="وضعیت اقتصادی" />}
                                    />
                                )}
                            />
                        </Grid>
                        <Grid item xs={1}>
                            <Controller
                                name="has_access_id"
                                control={control}
                                render={({ field: { onChange, value } }) => (
                                    <Autocomplete
                                        size="small"
                                        disablePortal
                                        value={value}
                                        onChange={(event, newValue) => {
                                            onChange(newValue)
                                        }}
                                        options={["بله", "خیر"]}
                                        renderInput={(params) => <TextField autoComplete="off" fullWidth {...params} label="آیا راه دسترسی از قبل وجود دارد؟ *" />}
                                    />
                                )}
                            />
                        </Grid>
                        <Grid item xs={1}>
                            <LtrTextField autoComplete="off"  {...register('shomare_estelam_harim')} label="شماره استعلام دفتر ایمنی و حریم" size="small" fullWidth type="tel" />
                        </Grid>
                        <Grid item xs={1}>
                            <Stack direction={'row'} spacing={1} alignItems={'center'}>
                                <Typography sx={{ flex: 2 }} variant="body2">حداکثر مدت زمان شروع عملیات: *</Typography>
                                <LtrTextField autoComplete="off"  {...register('max_month')} sx={{ width: 60 }} label="ماه" size="small" type="tel" />
                                <LtrTextField autoComplete="off"  {...register('max_day')} sx={{ width: 60 }} label="روز" size="small" type="tel" />
                            </Stack>
                        </Grid>
                        <Grid item xs={1}>
                            <LtrTextField autoComplete="off" {...register('shomare_tahaodname')} label="شماره تعهدنامه" size="small" fullWidth type="tel" />
                        </Grid>
                        <Grid item xs={1}>
                            <LtrTextField autoComplete="off"  {...register('shomare_daftarkhaneh')} label="شماره دفترخانه" size="small" fullWidth type="tel" />
                        </Grid>
                        <Grid item xs={1}></Grid>
                        <Grid item xs={1}>
                            <TextField autoComplete="off" {...register('description')} multiline rows={2} label="توضیحات" size="small" fullWidth />
                        </Grid>
                        <Grid item xs={1}>
                            <TextField autoComplete="off" {...register('ronevesht')} multiline rows={2} label="رونوشت" size="small" fullWidth />
                        </Grid>
                        <Grid item xs={1}></Grid>
                    </Grid>
                </StyledForm>
            </DialogContent>
            <DialogActions sx={{ p: 2 }}>
                <Button variant="contained" size="large" type="submit" form={'InquiryPrivacyFencingCreateForm'}>ثبت</Button>
            </DialogActions>
        </LocalizationProvider >
    );
};
export default CreateForm;
