import StyledForm from "@/core/components/StyledForm";
import UploadSystem from "@/core/components/UploadSystem";
import {GET_PROVINCE_LIST, UPDATE_LOAN_REQUEST_WELFARE, DETAILS_LOAN_REQUEST_WELFARE} from "@/core/data/apiRoutes";
import useDirection from "@/lib/app/hooks/useDirection";
import useUser from "@/lib/app/hooks/useUser";
import DataSaverOnIcon from "@mui/icons-material/DataSaverOn";
import {Box, Button, Chip, Divider, Stack, TextField} from "@mui/material";
import axios from "axios";
import {Field, Formik} from "formik";
import {useTranslations} from "next-intl";
import {useEffect, useMemo, useState} from "react";
import * as Yup from "yup";
import SelectBox from "@/core/components/SelectBox";
import useRequest from "@/lib/app/hooks/useRequest";
import {useRouter} from "next/router";
import useLoading from "@/lib/app/hooks/useLoading";

const EditFormComponent = () => {
    const t = useTranslations();
    const {directionApp} = useDirection();
    const {token} = useUser();
    const requestServer = useRequest();
    const router = useRouter();
    const {setLoadingPage} = useLoading();

    const [provinceList, setProvinceList] = useState(null);
    const [initialValues, setInitialValues] = useState(null);

    // get province list
    useEffect(() => {
        setLoadingPage(true)
        requestServer(GET_PROVINCE_LIST, "get", {auth: true, notification: false})
            .then(function ({data}) {
                const formattedData = data.map((province, index) => ({
                    id: index,
                    name: province.name,
                    value: province.id,
                }));
                setProvinceList(formattedData);
            }).catch(() => {
        });
    }, []);


    // get form data
    useEffect(() => {
        if (!provinceList) return;
        requestServer(DETAILS_LOAN_REQUEST_WELFARE + router.query.id, "get", {auth: true, notification: false})
            .then(function ({data}) {
                const item = data.data;
                const formattedData = {
                    name: item.name,
                    phone_number: item.phone_number,
                    province_id: item.province_id,
                    national_id: item.national_id,
                    shenasname_id: item.shenasname_id,
                    sherkat_naft_doc: item.sherkat_naft_doc,
                    estate_doc: item.estate_doc,
                    agreement_doc: item.agreement_doc,
                    national_card_image: item.national_card_image,
                    shenasname_image: item.shenasname_image,
                    payan_khedmat_image: item.payan_khedmat_image,
                }
                setInitialValues(formattedData);
                setLoadingPage(false)
            })
            .catch(() => {
            })
    }, [provinceList]);

    // validation and request action of form
    const validationSchema = Yup.object().shape({
        name: Yup.string().required(t("LoanRequest.error_message_name")),
        phone_number: Yup.string().required(
            t("LoanRequest.error_message_phone_number")
        ),
        province_id: Yup.string().required(t("LoanRequest.error_message_province")),
        national_id: Yup.string().required(t("LoanRequest.error_message_national_code")),
        shenasname_id: Yup.string().required(t("LoanRequest.error_message_shenasname_id")),
        sherkat_naft_doc: Yup.mixed().required(t("LoanRequest.error_message_sherkat_naft_doc")),
        estate_doc: Yup.mixed().required(t("LoanRequest.error_message_estate_doc")),
        agreement_doc: Yup.mixed().required(t("LoanRequest.error_message_agreement_doc")),
        national_card_image: Yup.mixed().required(t("LoanRequest.error_message_national_card_image")),
        shenasname_image: Yup.mixed().required(t("LoanRequest.error_message_shenasname_image")),
        payan_khedmat_image: Yup.mixed().required(t("LoanRequest.error_message_payan_khedmat_image")),
    });

    const handleSubmit = async (values, props) => {
        const formData = new FormData();
        formData.append("name", values.name);
        formData.append("phone_number", values.phone_number);
        formData.append("province_id", values.province_id);
        formData.append("national_id", values.national_id);
        formData.append("shenasname_id", values.shenasname_id);
        if (values.sherkat_naft_doc != initialValues.sherkat_naft_doc)
            formData.append("sherkat_naft_doc", values.sherkat_naft_doc);
        if (values.estate_doc != initialValues.estate_doc)
            formData.append("estate_doc", values.estate_doc);
        if (values.agreement_doc != initialValues.agreement_doc)
            formData.append("agreement_doc", values.agreement_doc);
        if (values.shenasname_image != initialValues.shenasname_image)
            formData.append("shenasname_image", values.shenasname_image);
        if (values.national_card_image != initialValues.national_card_image)
            formData.append("national_card_image", values.national_card_image);
        if (values.payan_khedmat_image != initialValues.payan_khedmat_image)
            formData.append("payan_khedmat_image", values.payan_khedmat_image);

        requestServer(UPDATE_LOAN_REQUEST_WELFARE + router.query.id, "post", {auth: true, data: formData})
            .then(function (response) {
            })
            .catch(function (error) {
            })
            .finally(function () {
                props.setSubmitting(false);
            });
    };
    if (!initialValues) return "";
    return (
        <Formik
            initialValues={initialValues}
            onSubmit={handleSubmit}
            validationSchema={validationSchema}
        >
            {(props) => (
                <Stack
                    spacing={2}
                    sx={{
                        p: 1,
                        width: "100%",
                    }}
                >
                    <StyledForm sx={{width: "100%"}}>
                        <Box sx={{my: 1}}>
                            <Divider>
                                <Chip
                                    label={t("LoanRequest.personal_info")}
                                />
                            </Divider>
                        </Box>
                        <Box
                            sx={{
                                display: "flex",
                                flexDirection: {xs: "column", sm: "row"},
                                alignItems: "start",
                                justifyContent: "center",
                                width: "100%",
                            }}
                        >
                            <Box
                                sx={{
                                    mx: {xs: 0, sm: 2},
                                    my: 2,
                                    width: "100%",
                                }}
                            >
                                <Field
                                    as={TextField}
                                    sx={{width: "100%"}}
                                    name="name"
                                    variant="outlined"
                                    size="small"
                                    label={t("LoanRequest.text_field_name")}
                                    placeholder={t("LoanRequest.text_field_enter_your_name")}
                                    type={"text"}
                                    error={!!(props.touched.name && props.errors.name)}
                                    fullWidth
                                    helperText={props.touched.name ? props.errors.name : null}
                                />
                            </Box>
                            <Box
                                sx={{
                                    mx: {xs: 0, sm: 2},
                                    my: 2,
                                    width: "100%",
                                }}
                            >
                                <Field
                                    as={TextField}
                                    sx={{width: "100%"}}
                                    name="phone_number"
                                    variant="outlined"
                                    size="small"
                                    label={t("LoanRequest.text_field_phone_number")}
                                    placeholder={t(
                                        "LoanRequest.text_field_enter_your_phone_number"
                                    )}
                                    type={"text"}
                                    error={
                                        !!(props.touched.phone_number && props.errors.phone_number)
                                    }
                                    fullWidth
                                    helperText={
                                        props.touched.phone_number
                                            ? props.errors.phone_number
                                            : null
                                    }
                                />
                            </Box>
                            <Box
                                sx={{
                                    mx: {xs: 0, sm: 2},
                                    my: 2,
                                    width: "100%",
                                }}
                            >
                                <Field
                                    name="province_id"
                                    label={t("LoanRequest.text_field_province")} // t("LoanRequest.text_field_enter_your_province")
                                    size="small"
                                    selectType="province_id"
                                    component={SelectBox}
                                    selectors={provinceList}
                                    select={props.values.province_id}
                                    setFieldValue={props.setFieldValue}
                                    setFieldTouched={props.setFieldTouched}
                                    error={
                                        !!(props.touched.province_id && props.errors.province_id)
                                    }
                                    helperText={
                                        props.touched.province_id ? props.errors.province_id : null
                                    }
                                />
                            </Box>
                        </Box>
                        <Box
                            sx={{
                                display: "flex",
                                flexDirection: {xs: "column", sm: "row"},
                                alignItems: "start",
                                justifyContent: "center",
                                width: "100%",
                            }}
                        >
                            <Box
                                sx={{
                                    mx: {xs: 0, sm: 2},
                                    my: 2,
                                    width: "100%",
                                }}
                            >
                                <Field
                                    as={TextField}
                                    sx={{width: "100%"}}
                                    name="national_id"
                                    variant="outlined"
                                    size="small"
                                    label={t("LoanRequest.text_field_national_code")}
                                    placeholder={t(
                                        "LoanRequest.text_field_enter_your_national_code"
                                    )}
                                    type={"text"}
                                    error={
                                        !!(props.touched.national_id && props.errors.national_id)
                                    }
                                    fullWidth
                                    helperText={
                                        props.touched.national_id
                                            ? props.errors.national_id
                                            : null
                                    }
                                />
                            </Box>
                            <Box
                                sx={{
                                    mx: {xs: 0, sm: 2},
                                    my: 2,
                                    width: "100%",
                                }}
                            >
                                <Field
                                    as={TextField}
                                    sx={{width: "100%"}}
                                    name="shenasname_id"
                                    variant="outlined"
                                    size="small"
                                    label={t("LoanRequest.text_field_shenasname_id")}
                                    placeholder={t(
                                        "LoanRequest.text_field_enter_your_shenasname_id"
                                    )}
                                    type={"text"}
                                    error={
                                        !!(props.touched.shenasname_id && props.errors.shenasname_id)
                                    }
                                    fullWidth
                                    helperText={
                                        props.touched.shenasname_id
                                            ? props.errors.shenasname_id
                                            : null
                                    }
                                />
                            </Box>
                        </Box>
                        <Box sx={{my: 1}}>
                            <Divider>
                                <Chip
                                    label={t("LoanRequest.uploading_documents")}
                                />
                            </Divider>
                        </Box>
                        <Stack spacing={{xs: 1, sm: 2}} direction="row" useFlexGap flexWrap="wrap"
                               sx={{justifyContent: "center"}}>
                            <Box sx={{
                                mx: {xs: 0, sm: 1},
                                maxWidth: "200px"
                            }}>
                                <UploadSystem
                                    setFieldValue={props.setFieldValue}
                                    default_image={initialValues.sherkat_naft_doc}
                                    fieldName="sherkat_naft_doc"
                                    imageAlt={t("app_name")}
                                    label={t("LoanRequest.file_field_sherkat_naft_doc")}
                                    enableDelete={false}
                                    error={
                                        !!(props.touched.sherkat_naft_doc && props.errors.sherkat_naft_doc)
                                    }
                                    helperText={
                                        props.touched.sherkat_naft_doc ? props.errors.sherkat_naft_doc : null
                                    }
                                />
                            </Box>
                            <Box sx={{
                                mx: {xs: 0, sm: 1},
                                maxWidth: "200px"
                            }}>
                                <UploadSystem
                                    setFieldValue={props.setFieldValue}
                                    default_image={initialValues.estate_doc}
                                    fieldName="estate_doc"
                                    imageAlt={t("app_name")}
                                    label={t("LoanRequest.file_field_estate_doc")}
                                    enableDelete={false}
                                    error={
                                        !!(props.touched.estate_doc && props.errors.estate_doc)
                                    }
                                    helperText={
                                        props.touched.estate_doc ? props.errors.estate_doc : null
                                    }
                                />
                            </Box>
                            <Box sx={{
                                mx: {xs: 0, sm: 1},
                                maxWidth: "200px"
                            }}>
                                <UploadSystem
                                    setFieldValue={props.setFieldValue}
                                    default_image={initialValues.agreement_doc}
                                    fieldName="agreement_doc"
                                    imageAlt={t("app_name")}
                                    label={t("LoanRequest.file_field_agreement_doc")}
                                    enableDelete={false}
                                    error={
                                        !!(props.touched.agreement_doc && props.errors.agreement_doc)
                                    }
                                    helperText={
                                        props.touched.agreement_doc ? props.errors.agreement_doc : null
                                    }
                                />
                            </Box>
                            <Box sx={{
                                mx: {xs: 0, sm: 1},
                                maxWidth: "200px"
                            }}>
                                <UploadSystem
                                    setFieldValue={props.setFieldValue}
                                    default_image={initialValues.shenasname_image}
                                    fieldName="shenasname_image"
                                    imageAlt={t("app_name")}
                                    label={t("LoanRequest.file_field_shenasname_image")}
                                    enableDelete={false}
                                    error={
                                        !!(props.touched.shenasname_image && props.errors.shenasname_image)
                                    }
                                    helperText={
                                        props.touched.shenasname_image ? props.errors.shenasname_image : null
                                    }
                                />
                            </Box>
                            <Box sx={{
                                mx: {xs: 0, sm: 1},
                                maxWidth: "200px"
                            }}>
                                <UploadSystem
                                    setFieldValue={props.setFieldValue}
                                    default_image={initialValues.payan_khedmat_image}
                                    fieldName="payan_khedmat_image"
                                    imageAlt={t("app_name")}
                                    label={t("LoanRequest.file_field_payan_khedmat_image")}
                                    enableDelete={false}
                                    error={
                                        !!(props.touched.payan_khedmat_image && props.errors.payan_khedmat_image)
                                    }
                                    helperText={
                                        props.touched.payan_khedmat_image ? props.errors.payan_khedmat_image : null
                                    }
                                />
                            </Box>
                            <Box sx={{
                                mx: {xs: 0, sm: 1},
                                maxWidth: "200px"
                            }}>
                                <UploadSystem
                                    setFieldValue={props.setFieldValue}
                                    default_image={initialValues.national_card_image}
                                    fieldName="national_card_image"
                                    imageAlt={t("app_name")}
                                    label={t("LoanRequest.file_field_national_card_image")}
                                    enableDelete={false}
                                    error={
                                        !!(props.touched.national_card_image && props.errors.national_card_image)
                                    }
                                    helperText={
                                        props.touched.national_card_image ? props.errors.national_card_image : null
                                    }
                                />
                            </Box>
                        </Stack>
                        <Box
                            sx={{
                                display: "flex",
                                flexDirection: {xs: "column", sm: "row"},
                                alignItems: "center",
                                mx: "auto",
                                my: 2,
                                width: {xs: "100%", sm: "30%", md: "25%"},
                            }}
                        >
                            <Button
                                fullWidth
                                type="submit"
                                variant="contained"
                                size="large"
                                sx={{mt: 2}}
                                endIcon={<DataSaverOnIcon/>}
                                disabled={props.isSubmitting}
                            >
                                {t("LoanRequest.button_submit")}
                            </Button>
                        </Box>
                    </StyledForm>
                </Stack>
            )}
        </Formik>
    );
};

export default EditFormComponent;