import SelectBox from "@/core/components/SelectBox";
import DataSaverOnIcon from "@mui/icons-material/DataSaverOn";
import {
    Box,
    Button,
    Checkbox,
    Fade,
    FormControlLabel,
    Grid,
    Stack,
    TextField,
    ToggleButton,
    ToggleButtonGroup,
    Typography
} from "@mui/material";
import {useFormik} from "formik";
import {useTranslations} from "next-intl";
import * as Yup from "yup";
import {CenterLayout, useRequest, useUser} from "@witel/webapp-builder";
import useProvince from "@/lib/app/hooks/useProvince";
import useCities from "@/lib/app/hooks/useCities";
import PlateNumber from "@/core/components/PlateNumber";
import MuiDatePicker from "@/core/components/MuiDatePicker";
import UseEducations from "@/lib/app/hooks/useEducations";
import useOccupations from "@/lib/app/hooks/useOccupations";
import {useState} from "react";
import DoneIcon from '@mui/icons-material/Done';
import {NextLinkComposed} from "@witel/webapp-builder/dist/utils/linkRouting";
import SvgDone from "@/core/components/svgs/SvgDone";
import {SEND_LOAN_REQUEST_NAVGAN} from "@/core/data/apiRoutes";
import {useRouter} from "next/router";

const AddFormComponent = () => {
    const router = useRouter()
    const {getUser, changeUser} = useUser()
    const t = useTranslations();
    const [finishLoanRequest, setFinishLoanRequest] = useState(false)
    const [checked, setChecked] = useState(false);
    const requestServer = useRequest()
    const {provinceList, isLoadingProvinceList, errorProvinceList} = useProvince()
    const {cityTextField, cityList, setProvinceID, isLoadingCityList} = useCities()
    const {educationsList, isLoadingEducationsList, errorEducationsList} = UseEducations()
    const {occupationsList, isLoadingOccupationsList, errorOccupationsList} = useOccupations()

    const initialValues = {
        person_type: "real",
        telephone_number: "",
        vehicle_type: "",
        province_id: "",
        city_id: "",
        navgan_id: "",
        national_id: "",
        national_number: "",
        national_serial_number: "",
        national_card_tracking_code: "",
        national_serial_number_or_tracking_code: "national_serial_number",
        postal_code: "",
        navgan_type: "",
        plate_part1: "",
        plate_part2: "الف",
        plate_part3: "",
        plate_part4: "",
        address: "",
        birthday: "",
        education_id: "",
        occupation_id: "",
        checkedBox: false,
    };

    const validationSchema = Yup.object().shape({
        person_type: Yup.string().required(t("LoanRequest.error_message_person_type")),
        telephone_number: Yup.mixed()
            .test("max", `${t("LoanRequest.tel_number_max")}`, (value) => {
                const stringValue = String(value);
                return stringValue.length === 11
            })
            .required(t("LoanRequest.error_message_tel_number")),
        vehicle_type: Yup.string().required(t("LoanRequest.error_message_vehicle_type")),
        navgan_type: Yup.string().required(t("LoanRequest.error_message_navgan_type")),
        occupation_id: Yup.string().required(t("LoanRequest.error_message_occupation_id")),
        education_id: Yup.string().required(t("LoanRequest.error_message_education_id")),
        address: Yup.string().required(t("LoanRequest.error_message_address")),
        birthday: Yup.string().required(t("LoanRequest.error_message_date_of_birth")),
        postal_code: Yup.mixed()
            .test("max", `${t("LoanRequest.postal_code_max")}`, (value) => value.toString().length === 10)
            .required(t("LoanRequest.error_message_postal_code")),
        plate_part1: Yup.mixed().test("max", `${t("LoanRequest.error_message_plate_number")}`, (value) => value.toString().length === 2)
            .required(t("LoanRequest.error_message_plate_number")),
        plate_part2: Yup.mixed()
            .required(t("LoanRequest.error_message_plate_number")),
        plate_part3: Yup.mixed().test("max", `${t("LoanRequest.error_message_plate_number")}`, (value) => value.toString().length === 3)
            .required(t("LoanRequest.error_message_plate_number")),
        plate_part4: Yup.mixed().test("max", `${t("LoanRequest.error_message_plate_number")}`, (value) => value.toString().length === 2)
            .required(t("LoanRequest.error_message_plate_number")),
        navgan_id: Yup.mixed().required(t("LoanRequest.error_message_navgan_id")),
        province_id: Yup.string().required(t("LoanRequest.error_message_province_id")),
        city_id: Yup.string().required(t("LoanRequest.error_message_city_id")),
        national_id: Yup.mixed()
            .test("is-number", `${t("LoanRequest.national_code_number")}`, (value) => !isNaN(value))
            .test("positive", `${t("LoanRequest.national_code_positive")}`, (value) => value >= 0)
            .test("max", `${t("LoanRequest.national_code_max")}`, (value) => value.toString().length === 10)
            .required(t("LoanRequest.error_message_national_id")),
        national_number: Yup.mixed().when('person_type', ([person_type], schema) => {
            return person_type === 'legal' ? schema
                .test("is-number", `${t("LoanRequest.national_number_number")}`, (value) => !isNaN(value))
                .test("positive", `${t("LoanRequest.national_number_positive")}`, (value) => value >= 0)
                .test("max", `${t("LoanRequest.national_number_max")}`, (value) => value && value.toString().length === 11)
                .required(t("LoanRequest.error_message_national_number")) : schema;
        }),
        national_serial_number: Yup.string().when('national_serial_number_or_tracking_code', ([national_serial_number_or_tracking_code], schema) => {
            return national_serial_number_or_tracking_code === 'national_serial_number' ? schema.required(t("LoanRequest.error_message_shenasname_serial")) : schema
        }),
        national_card_tracking_code: Yup.string().when('national_serial_number_or_tracking_code', ([national_serial_number_or_tracking_code], schema) => {
            return national_serial_number_or_tracking_code === 'national_card_tracking_code' ? schema.required(t("LoanRequest.error_message_tracking_code")) : schema
        })
    });


    const handleSubmit = async (values, props) => {
        props.setSubmitting(true)
        let _national_number = values.person_type === "legal" ? {
            shenase_meli: values.national_number
        } : {}

        const _national_card = values.national_serial_number_or_tracking_code === "national_serial_number" ? {
            national_serial_number: values.national_serial_number
        } : {
            national_tracking_code: values.national_card_tracking_code
        }

        let _data = {
            is_legal_person: values.person_type === 'legal' ? 1 : 0,
            telephone_number: values.telephone_number,
            national_id: values.national_id,
            vehicle_type: values.vehicle_type,
            province_id: values.province_id,
            city_id: values.city_id,
            navgan_id: values.navgan_id,
            postal_code: values.postal_code,
            navgan_type: values.navgan_type,
            plate_part1: values.plate_part1,
            plate_part2: values.plate_part2,
            plate_part3: values.plate_part3,
            plate_part4: values.plate_part4,
            address: values.address,
            birthday: values.birthday.locale('en').format("YYYY-MM-DD"),
            education_id: values.education_id,
            occupation_id: values.occupation_id, ..._national_card, ..._national_number
        }

        await requestServer(SEND_LOAN_REQUEST_NAVGAN, "post", {
            auth: true, notification: true, data: _data
        }).then(() => {
            router.replace('/dashboard/navgan/followUp-loan')
            getUser((data) => {
                changeUser(data);
            });
        }).catch(() => {
        }).finally(() => {
            props.setSubmitting(false)
        })
    };

    const formik = useFormik({
        initialValues, validationSchema, onSubmit: handleSubmit
    })

    return (<>
        {finishLoanRequest ? (<CenterLayout>
            <SvgDone width={200} height={200}/>
            <Stack direction={'row'} spacing={0.7} sx={{mb: 4}}>
                <Typography variant={'h5'}
                            align={'center'}>{t("LoanRequest.finish_loan_request")}</Typography>
                <DoneIcon color={'success'}/>
            </Stack>
            <Button variant={'contained'} component={NextLinkComposed}
                    to={'/dashboard/navgan/followUp-loan'}>
                {t("LoanRequest.back_to_dashboard")}
            </Button>
        </CenterLayout>) : (<>
            <Grid container spacing={2} sx={{padding: 2}}
            >
                <Grid item xs={12} sm={4}
                >
                    <ToggleButtonGroup
                        color="primary"
                        fullWidth
                        size={'small'}
                        value={formik.values.person_type}
                        exclusive
                        onChange={(e, value) => {
                            if (value === null) return
                            formik.handleChange({
                                target: {
                                    name: "person_type", value: value,
                                },
                            })
                        }}
                    >
                        <ToggleButton value="real">
                            {t("LoanRequest.real_person")}
                        </ToggleButton>
                        <ToggleButton value="legal">
                            {t("LoanRequest.legal_person")}
                        </ToggleButton>
                    </ToggleButtonGroup>
                </Grid>
                <Grid item xs={12} sm={4}
                >
                    <TextField
                        sx={{width: "100%"}}
                        name="national_id"
                        variant="outlined"
                        size="small"
                        value={formik.values.national_id}
                        inputProps={{inputMode: 'numeric', pattern: '[0-9]*'}}
                        type={'tel'}
                        onChange={(event) => {
                            const inputValue = event.target.value;
                            if (isNaN(Number(inputValue))) {
                                return;
                            }
                            formik.handleChange({
                                target: {
                                    name: "national_id", value: inputValue,
                                },
                            });
                        }}
                        label={t("LoanRequest.text_field_national_code")}
                        placeholder={t("LoanRequest.text_field_enter_your_national_code")}
                        onBlur={formik.handleBlur("national_id")}
                        error={formik.touched.national_id && Boolean(formik.errors.national_id)}
                        helperText={formik.touched.national_id && formik.errors.national_id}
                        fullWidth
                    />
                </Grid>
                <Fade in={formik.values.person_type === 'legal'}>
                    <Grid item xs={12} sm={4}
                    >
                        <TextField
                            sx={{width: "100%"}}
                            name="national_number"
                            variant="outlined"
                            size="small"
                            value={formik.values.national_number}
                            inputProps={{inputMode: 'numeric', pattern: '[0-9]*'}}
                            type={'tel'}
                            onChange={(event) => {
                                const inputValue = event.target.value;
                                if (isNaN(Number(inputValue))) {
                                    return;
                                }
                                formik.handleChange({
                                    target: {
                                        name: "national_number", value: inputValue,
                                    },
                                });
                            }}
                            label={t("LoanRequest.text_field_national_number")}
                            placeholder={t("LoanRequest.text_field_enter_your_national_number")}
                            onBlur={formik.handleBlur("national_number")}
                            error={formik.touched.national_number && Boolean(formik.errors.national_number)}
                            helperText={formik.touched.national_number && formik.errors.national_number}
                            fullWidth
                        />
                    </Grid>
                </Fade>
            </Grid>
            <Grid container spacing={2} sx={{padding: 2}}
            >
                <Grid item xs={12} sm={4}
                >
                    <ToggleButtonGroup
                        color="primary"
                        fullWidth
                        size={'small'}
                        value={formik.values.national_serial_number_or_tracking_code}
                        exclusive
                        onChange={(e, value) => {
                            if (value === null) return
                            formik.handleChange({
                                target: {
                                    name: "national_serial_number_or_tracking_code", value: value,
                                },
                            })
                        }}
                    >
                        <ToggleButton value="national_serial_number">
                            {t("LoanRequest.text_field_shenasname_serial")}
                        </ToggleButton>
                        <ToggleButton value="national_card_tracking_code">
                            {t("LoanRequest.text_field_national_trackin_code")}
                        </ToggleButton>
                    </ToggleButtonGroup>
                </Grid>
                {formik.values.national_serial_number_or_tracking_code === 'national_serial_number' ? (
                    <Grid item xs={12} sm={4}
                    >
                        <TextField
                            sx={{width: "100%"}}
                            name="national_serial_number"
                            variant="outlined"
                            size="small"
                            value={formik.values.national_serial_number}
                            label={t("LoanRequest.text_field_shenasname_serial")}
                            placeholder={t("LoanRequest.text_field_enter_your_shenasname_serial")}
                            fullWidth
                            onChange={formik.handleChange}
                            onBlur={formik.handleBlur("national_serial_number")}
                            error={formik.touched.national_serial_number && Boolean(formik.errors.national_serial_number)}
                            helperText={formik.touched.national_serial_number && formik.errors.national_serial_number}
                        />
                    </Grid>) : (<Grid item xs={12} sm={4}
                >
                    <TextField
                        sx={{width: "100%"}}
                        name="national_card_tracking_code"
                        variant="outlined"
                        size="small"
                        value={formik.values.national_card_tracking_code}
                        label={t("LoanRequest.text_field_national_trackin_code")}
                        placeholder={t("LoanRequest.text_field_enter_your_trackin_code")}
                        fullWidth
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur("national_card_tracking_code")}
                        error={formik.touched.national_card_tracking_code && Boolean(formik.errors.national_card_tracking_code)}
                        helperText={formik.touched.national_card_tracking_code && formik.errors.national_card_tracking_code}
                    />
                </Grid>)}

                <Grid item xs={12} sm={4}>
                    <MuiDatePicker
                        formik={formik}
                        error={formik.touched.birthday && Boolean(formik.errors.birthday)}
                        helperText={formik.touched.birthday && formik.errors.birthday}
                        onBlur={formik.handleBlur("birthday")}
                    />
                </Grid>
            </Grid>
            <Grid container spacing={2} sx={{padding: 2}}>
                <Grid item xs={12} sm={6}>
                    <TextField
                        sx={{width: "100%"}}
                        name="postal_code"
                        variant="outlined"
                        value={formik.values.postal_code}
                        inputProps={{inputMode: 'numeric', pattern: '[0-9]*'}}
                        type={'tel'}
                        onChange={(event) => {
                            const inputValue = event.target.value;
                            if (isNaN(Number(inputValue))) {
                                return;
                            }
                            formik.handleChange({
                                target: {
                                    name: "postal_code", value: inputValue,
                                },
                            });
                        }}
                        size="small"
                        label={t("LoanRequest.text_field_postal_code")}
                        placeholder={t("LoanRequest.text_field_enter_your_postal_code")}
                        fullWidth
                        onBlur={formik.handleBlur("postal_code")}
                        error={formik.touched.postal_code && Boolean(formik.errors.postal_code)}
                        helperText={formik.touched.postal_code && formik.errors.postal_code}
                    />
                </Grid>
                <Grid item xs={12} sm={6}>
                    <TextField
                        sx={{width: "100%"}}
                        name="telephone_number"
                        variant="outlined"
                        value={formik.values.telephone_number}
                        inputProps={{inputMode: 'numeric', pattern: '[0-9]*'}}
                        type={'tel'}
                        size="small"
                        onChange={(event) => {
                            const inputValue = event.target.value;
                            if (isNaN(Number(inputValue))) {
                                return;
                            }
                            formik.handleChange({
                                target: {
                                    name: "telephone_number", value: inputValue,
                                },
                            });
                        }}
                        label={t("LoanRequest.text_field_tel_number")}
                        placeholder={t("LoanRequest.text_field_enter_your_tel_number")}
                        fullWidth
                        onBlur={formik.handleBlur("telephone_number")}
                        error={formik.touched.telephone_number && Boolean(formik.errors.telephone_number)}
                        helperText={formik.touched.telephone_number && formik.errors.telephone_number}
                    />
                </Grid>
            </Grid>
            <Grid container spacing={2} sx={{padding: 2}}>
                <Grid item xs={12} sm={6}>
                    <SelectBox
                        name="navgan_type"
                        label={t("LoanRequest.text_field_navgan_type")}
                        size="small"
                        value={formik.values.navgan_type}
                        selectType="navgan_type"
                        selectors={[{
                            id: 1, value: "روستایی", name: "روستایی"
                        }, {
                            id: 2, value: "عمومی", name: "عمومی"
                        }, {
                            id: 3, value: "منطقه آزاد", name: "منطقه آزاد"
                        }]}
                        schema={{value: 'value', name: 'name'}}
                        select={formik.values.navgan_type}
                        handleChange={(event) => {
                            formik.setFieldValue('navgan_type', event.target.value)
                        }}
                        setFieldTouched={formik.setFieldTouched}
                        error={formik.touched.navgan_type && Boolean(formik.errors.navgan_type)}
                        helperText={formik.touched.navgan_type && formik.errors.navgan_type}
                        onBlur={formik.handleBlur("navgan_type")}
                    />
                </Grid>
                <Grid item xs={12} sm={6}>
                    <TextField
                        sx={{width: "100%"}}
                        name="navgan_id"
                        variant="outlined"
                        inputProps={{inputMode: 'numeric', pattern: '[0-9]*'}}
                        type={'tel'}
                        value={formik.values.navgan_id}
                        onChange={formik.handleChange}
                        size="small"
                        label={t("LoanRequest.text_field_navgan_id")}
                        placeholder={t("LoanRequest.text_field_enter_your_navgan_id")}
                        fullWidth
                        onBlur={formik.handleBlur("navgan_id")}
                        error={formik.touched.navgan_id && Boolean(formik.errors.navgan_id)}
                        helperText={formik.touched.navgan_id && formik.errors.navgan_id}
                    />
                </Grid>
            </Grid>
            <Grid container spacing={2} sx={{padding: 2}}>
                <Grid item xs={12} sm={6}>
                    <SelectBox
                        name="province_id"
                        label={t("LoanRequest.text_field_province_id")}
                        size="small"
                        selectType="province_id"
                        isLoading={isLoadingProvinceList}
                        errorEcured={errorProvinceList}
                        selectors={provinceList}
                        schema={{value: 'value', name: 'name'}}
                        select={formik.values.province_id}
                        value={formik.values.province_id}
                        handleChange={(event) => {
                            formik.setFieldValue('province_id', event.target.value);
                            setProvinceID(event.target.value)
                            formik.setFieldTouched("city_id", false, false);
                            formik.setFieldValue("city_id", "")
                        }}
                        setFieldTouched={formik.setFieldTouched}
                        error={formik.touched.province_id && Boolean(formik.errors.province_id)}
                        helperText={formik.touched.province_id && formik.errors.province_id}
                        onBlur={formik.handleBlur("province_id")}
                    />
                </Grid>
                <Grid item xs={12} sm={6}>
                    <SelectBox
                        name="city_id"
                        label={isLoadingCityList ? `${t("LoanRequest.cityList_loading")}` : (cityList.length === 0 ? `${t("LoanRequest.cityList_empty")}` : cityTextField)}
                        size="small"
                        selectType="city_id"
                        schema={{value: 'value', name: 'name'}}
                        disabled={cityList.length === 0}
                        selectors={cityList}
                        select={formik.values.city_id}
                        value={formik.values.city_id}
                        handleChange={(event) => formik.setFieldValue('city_id', event.target.value)}
                        setFieldTouched={formik.setFieldTouched}
                        error={formik.touched.city_id && Boolean(formik.errors.city_id)}
                        helperText={formik.touched.city_id && formik.errors.city_id}
                        onBlur={formik.handleBlur("city_id")}
                    />
                </Grid>
            </Grid>
            <Grid container spacing={2} sx={{padding: 2}}>
                <Grid item xs={12} sm={6}>
                    <SelectBox
                        name="vehicle_type"
                        label={t("LoanRequest.text_field_vehicle_type")}
                        size="small"
                        value={formik.values.vehicle_type}
                        schema={{value: 'value', name: 'name'}}
                        selectType="vehicle_type"
                        selectors={[{
                            id: 0, value: "اتوبوس", name: "اتوبوس"
                        }, {
                            id: 1, value: "مینی بوس", name: "مینی بوس"
                        }]}
                        select={formik.values.vehicle_type}
                        handleChange={(event) => formik.setFieldValue('vehicle_type', event.target.value)}
                        error={formik.touched.vehicle_type && Boolean(formik.errors.vehicle_type)}
                        helperText={formik.touched.vehicle_type && formik.errors.vehicle_type}
                        onBlur={formik.handleBlur("vehicle_type")}
                    />
                </Grid>
                <Grid item xs={12} sm={6}>
                    <PlateNumber formik={formik}/>
                </Grid>
            </Grid>
            <Grid container spacing={2} sx={{padding: 2}}>
                <Grid item xs={12} sm={6}>
                    <SelectBox
                        name="education_id"
                        label={t("LoanRequest.text_field_education_id")}
                        size="small"
                        isLoading={isLoadingEducationsList}
                        errorEcured={errorEducationsList}
                        selectType="education_id"
                        selectors={educationsList}
                        select={formik.values.education_id}
                        value={formik.values.education_id}
                        schema={{value: 'id', name: 'title'}}
                        handleChange={(event) => {
                            formik.setFieldValue('education_id', event.target.value)
                        }}
                        setFieldTouched={formik.setFieldTouched}
                        error={formik.touched.education_id && Boolean(formik.errors.education_id)}
                        helperText={formik.touched.education_id && formik.errors.education_id}
                        onBlur={formik.handleBlur("education_id")}
                    />
                </Grid>
                <Grid item xs={12} sm={6}>
                    <SelectBox
                        name="occupation_id"
                        label={t("LoanRequest.text_field_occupation_id")}
                        size="small"
                        isLoading={isLoadingOccupationsList}
                        errorEcured={errorOccupationsList}
                        selectType="occupation_id"
                        schema={{value: 'id', name: 'title'}}
                        selectors={occupationsList}
                        select={formik.values.occupation_id}
                        value={formik.values.occupation_id}
                        handleChange={(event) => {
                            formik.setFieldValue('occupation_id', event.target.value)
                        }}
                        setFieldTouched={formik.setFieldTouched}
                        error={formik.touched.occupation_id && Boolean(formik.errors.occupation_id)}
                        helperText={formik.touched.occupation_id && formik.errors.occupation_id}
                        onBlur={formik.handleBlur("occupation_id")}
                    />
                </Grid>
            </Grid>
            <Grid container spacing={2} sx={{padding: 2}}>
                <Grid item xs={12}>
                    <TextField
                        multiline
                        rows={8}
                        sx={{width: "100%"}}
                        name="address"
                        variant="outlined"
                        size="small"
                        label={t("LoanRequest.text_field_address")}
                        placeholder={t("LoanRequest.text_field_enter_your_address")}
                        fullWidth
                        value={formik.values.address}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur("address")}
                        error={formik.touched.address && Boolean(formik.errors.address)}
                        helperText={formik.touched.address && formik.errors.address}
                    />
                </Grid>
            </Grid>
            <Grid container spacing={2} sx={{padding: 2}}>
                <Grid item xs={12}>
                    <FormControlLabel
                        color={'error.main'}
                        control={<Checkbox
                            checked={formik.values.checkedBox}
                            onChange={(event) => {
                                formik.setFieldValue("checkedBox", event.target.checked)
                            }}
                        />}
                        label={`${t("LoanRequest.checkbox")}`}/>

                </Grid>
            </Grid>
            <Box
                sx={{
                    display: "flex",
                    flexDirection: {xs: "column", sm: "row"},
                    alignItems: "center",
                    mx: "auto",
                    width: {xs: "100%", sm: "30%", md: "25%"},
                }}
            >
                <Button
                    fullWidth
                    onClick={formik.handleSubmit}
                    type="submit"
                    variant="contained"
                    size="large"
                    sx={{my: 4}}
                    endIcon={<DataSaverOnIcon/>}
                    disabled={formik.values.checkedBox ? (formik.isSubmitting || !formik.dirty || !formik.isValid) : true}
                >
                    {formik.isSubmitting ? t("LoanRequest.button_while_submit") : t("LoanRequest.button_submit")}
                </Button>
            </Box>
        </>)}
    </>);
};

export default AddFormComponent;
