import Notifications from "@/core/components/notifications";
import SelectBox from "@/core/components/SelectBox";
import StyledForm from "@/core/components/StyledForm";
import UploadSystem from "@/core/components/UploadSystem";
import {GET_PROVINCE_LIST, SEND_LOAN_REQUEST_NAVGAN,} 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, Stack, TextField} from "@mui/material";
import axios from "axios";
import {Field, Formik} from "formik";
import {useTranslations} from "next-intl";
import {useEffect, useState} from "react";
import * as Yup from "yup";

const AddFormComponent = () => {
    const t = useTranslations();
    const {directionApp} = useDirection();
    const {token} = useUser();

    // get province list
    const [provinceList, setProvinceList] = useState([]);
    useEffect(() => {
        axios
            .get(GET_PROVINCE_LIST, {
                headers: {Authorization: `Bearer ${token}`},
            })
            .then(({data}) => {
                const formattedData = data.map((province, index) => ({
                    id: index,
                    name: province.name,
                    value: province.id,
                }));
                setProvinceList(formattedData);
            })
            .catch((error) => {
                Notifications(t, error.response);
            });
    }, []);
    // end get province list

    // upload files
    const [selectedImageShenasname, setSelectedImageShenasname] = useState(
        "/images/upload-image.svg"
    );
    const [fileTypeShenasname, setFileTypeShenasname] = useState(null);
    const [fileNameShenasname, setFileNameShenasname] = useState(null);
    const [selectedImageNationalCard, setSelectedImageNationalCard] = useState(
        "/images/upload-image.svg"
    );
    const [fileTypeNationalCard, setFileTypeNationalCard] = useState(null);
    const [fileNameNationalCard, setFileNameNationalCard] = useState(null);

    const handleUploadChangeShenasname = (event, setFieldValue) => {
        const uploadedFile = event.target?.files?.[0];
        if (uploadedFile) {
            const fileType = event.target?.files?.[0].type;
            const fileName = event.target?.files?.[0].name;
            setSelectedImageShenasname(URL.createObjectURL(uploadedFile));
            setFileTypeShenasname(fileType);
            setFileNameShenasname(fileName);
            setFieldValue("shenasname_img", uploadedFile);
        }
    };
    const handleUploadChangeNationalCard = (event, setFieldValue) => {
        const uploadedFile = event.target?.files?.[0];
        const fileType = event.target.files[0].type;
        const fileName = event.target.files[0].name;
        if (uploadedFile) {
            setSelectedImageNationalCard(URL.createObjectURL(uploadedFile));
            setFileTypeNationalCard(fileType);
            setFileNameNationalCard(fileName);
            setFieldValue("national_card_img", uploadedFile);
        }
    };
    // end upload files

    // initial values
    const initialValues = {
        name: "",
        phone_number: "",
        vehicle_type: "",
        plate_number: "",
        province: "",
        navgan_id: "",
        national_code: "",
        shenasname_id: "",
        national_card_img: null,
        shenasname_img: null,
    };
    // end initial values

    // validation
    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")
        ),
        vehicle_type: Yup.string().required(
            t("LoanRequest.error_message_vehicle_type")
        ),
        plate_number: Yup.string().required(
            t("LoanRequest.error_message_plate_number")
        ),
        navgan_id: Yup.string().required(t("LoanRequest.error_message_navgan_id")),
        province: Yup.string().required(t("LoanRequest.error_message_province")),
        national_code: Yup.string().required(
            t("LoanRequest.error_message_national_code")
        ),
        shenasname_id: Yup.string().required(
            t("LoanRequest.error_message_shenasname_id")
        ),
    });
    // end validation

    // submit
    const handleSubmit = async (values, props) => {
        Notifications(t, undefined);
        const formData = new FormData();
        formData.append("name", values.name);
        formData.append("phone_number", values.phone_number);
        formData.append("vehicle_type", values.vehicle_type);
        formData.append("plate_number", values.plate_number);
        formData.append("province_id", values.province);
        formData.append("navgan_id", values.navgan_id);
        formData.append("national_code", values.national_code);
        formData.append("shenasname_id", values.shenasname_id);
        if (values.shenasname_img != null)
            formData.append("shenasname_image", values.shenasname_img);
        if (values.national_card_img != null)
            formData.append("national_card_image", values.national_card_img);

        await axios
            .post(SEND_LOAN_REQUEST_NAVGAN, formData, {
                headers: {
                    Authorization: `Bearer ${token}`,
                    "Content-Type": "multipart/form-data",
                },
            })
            .then(function (response) {
                Notifications(t, response);
            })
            .catch(function (error) {
                Notifications(t, error.response);
                props.setSubmitting(false);
            });
    };
    // end submit

    return (
        <Formik
            initialValues={initialValues}
            onSubmit={handleSubmit}
            validationSchema={validationSchema}
        >
            {(props) => (
                <Stack
                    spacing={2}
                    sx={{
                        p: 1,
                        width: "100%",
                    }}
                >
                    <StyledForm sx={{width: "100%"}}>
                        <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 ? true : false}
                                    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
                                            ? true
                                            : false
                                    }
                                    fullWidth
                                    helperText={
                                        props.touched.phone_number
                                            ? props.errors.phone_number
                                            : 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="vehicle_type"
                                    variant="outlined"
                                    size="small"
                                    label={t("LoanRequest.text_field_vehicle_type")}
                                    placeholder={t(
                                        "LoanRequest.text_field_enter_your_vehicle_type"
                                    )}
                                    type={"text"}
                                    error={
                                        props.touched.vehicle_type && props.errors.vehicle_type
                                            ? true
                                            : false
                                    }
                                    fullWidth
                                    helperText={
                                        props.touched.vehicle_type
                                            ? props.errors.vehicle_type
                                            : null
                                    }
                                />
                            </Box>
                            <Box
                                sx={{
                                    mx: {xs: 0, sm: 2},
                                    my: 2,
                                    width: "100%",
                                }}
                            >
                                <Field
                                    as={TextField}
                                    sx={{width: "100%"}}
                                    name="plate_number"
                                    variant="outlined"
                                    size="small"
                                    label={t("LoanRequest.text_field_plate_number")}
                                    placeholder={t(
                                        "LoanRequest.text_field_enter_your_plate_number"
                                    )}
                                    type={"text"}
                                    error={
                                        props.touched.plate_number && props.errors.plate_number
                                            ? true
                                            : false
                                    }
                                    fullWidth
                                    helperText={
                                        props.touched.plate_number
                                            ? props.errors.plate_number
                                            : null
                                    }
                                />
                            </Box>
                            <Box
                                sx={{
                                    mx: {xs: 0, sm: 2},
                                    my: 2,
                                    width: "100%",
                                }}
                            >
                                <Field
                                    name="province"
                                    label={t("LoanRequest.text_field_province")} // t("LoanRequest.text_field_enter_your_province")
                                    size="small"
                                    selectType="province"
                                    component={SelectBox}
                                    selectors={provinceList}
                                    select={props.values.province}
                                    setFieldValue={props.setFieldValue}
                                    setFieldTouched={props.setFieldTouched}
                                    error={
                                        props.touched.gender && props.errors.province ? true : false
                                    }
                                    helperText={
                                        props.touched.gender ? props.errors.province : 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="navgan_id"
                                    variant="outlined"
                                    size="small"
                                    label={t("LoanRequest.text_field_navgan_id")}
                                    placeholder={t("LoanRequest.text_field_enter_your_navgan_id")}
                                    type={"text"}
                                    error={
                                        props.touched.navgan_id && props.errors.navgan_id
                                            ? true
                                            : false
                                    }
                                    fullWidth
                                    helperText={
                                        props.touched.navgan_id ? props.errors.navgan_id : null
                                    }
                                />
                            </Box>
                            <Box
                                sx={{
                                    mx: {xs: 0, sm: 2},
                                    my: 2,
                                    width: "100%",
                                }}
                            >
                                <Field
                                    as={TextField}
                                    sx={{width: "100%"}}
                                    name="national_code"
                                    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_code && props.errors.national_code
                                            ? true
                                            : false
                                    }
                                    fullWidth
                                    helperText={
                                        props.touched.national_code
                                            ? props.errors.national_code
                                            : 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
                                            ? true
                                            : false
                                    }
                                    fullWidth
                                    helperText={
                                        props.touched.shenasname_id
                                            ? props.errors.shenasname_id
                                            : null
                                    }
                                />
                            </Box>
                        </Box>
                        <Box
                            sx={{
                                display: "flex",
                                flexDirection: {xs: "column", sm: "row"},
                                alignItems: "center",
                                justifyContent: "space-around",
                                width: "100%",
                            }}
                        >
                            <UploadSystem
                                selectedImage={selectedImageShenasname}
                                handleUploadChange={(e) =>
                                    handleUploadChangeShenasname(e, props.setFieldValue)
                                }
                                setselectedImage={setSelectedImageShenasname}
                                setFieldValue={props.setFieldValue}
                                fieldname="shenasname_img"
                                fileType={fileTypeShenasname}
                                fileName={fileNameShenasname}
                                imageAlt={t("app_name")}
                                imageSize={[300 /*width*/, 150 /*height*/]}
                                label={t("LoanRequest.file_field_shenasname_image")}
                            />
                            <UploadSystem
                                selectedImage={selectedImageNationalCard}
                                handleUploadChange={(e) =>
                                    handleUploadChangeNationalCard(e, props.setFieldValue)
                                }
                                setselectedImage={setSelectedImageNationalCard}
                                setFieldValue={props.setFieldValue}
                                fieldname="national_card_img"
                                fileType={fileTypeNationalCard}
                                fileName={fileNameNationalCard}
                                imageAlt={t("app_name")}
                                imageSize={[300 /*width*/, 150 /*height*/]}
                                label={t("LoanRequest.file_field_national_card_image")}
                            />
                        </Box>
                        <Box
                            sx={{
                                display: "flex",
                                flexDirection: {xs: "column", sm: "row"},
                                alignItems: "center",
                                mx: "auto",
                                width: {xs: "100%", sm: "30%", md: "25%"},
                            }}
                        >
                            <Button
                                fullWidth
                                type="submit"
                                variant="contained"
                                size="large"
                                sx={{mt: 2}}
                                endIcon={<DataSaverOnIcon/>}
                                disabled={props.isSubmitting ? true : false}
                            >
                                {t("LoanRequest.button_submit")}
                            </Button>
                        </Box>
                    </StyledForm>
                </Stack>
            )}
        </Formik>
    );
};

export default AddFormComponent;