import SelectBox from "@/core/components/SelectBox";
import DataSaverOnIcon from "@mui/icons-material/DataSaverOn";
import {Box, Button, Checkbox, FormControlLabel, Grid, Stack, TextField, Typography} from "@mui/material";
import {useFormik} from "formik";
import {useTranslations} from "next-intl";
import * as Yup from "yup";
import {CenterLayout, useRequest} 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";

const AddFormComponent = () => {
    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 = {
      telephone_number: "",
      vehicle_type: "",
      province_id: "",
      city_id: "",
      navgan_id: "",
      national_id: "",
      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({
        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_serial_number: Yup.string().required(t("LoanRequest.error_message_shenasname_serial")),
    });


    const handleSubmit = async (values, props) => {
        props.setSubmitting(true)

        await requestServer(SEND_LOAN_REQUEST_NAVGAN, "post", {
            auth: true, notification: true, data: {
                telephone_number: values.telephone_number,
                vehicle_type: values.vehicle_type,
                province_id: values.province_id,
                city_id: values.city_id,
                navgan_id: values.navgan_id,
                national_id: values.national_id,
                national_serial_number: values.national_serial_number,
                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,
            }
        }).then(() => {
            setFinishLoanRequest(true)
        }).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}
                            >
                                <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>
                            <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}>
                                <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;