import StyledForm from "@/core/components/StyledForm";
import {Box, Button, Stack, TextField} from "@mui/material";
import {Field, Formik} from "formik";
import {useTranslations} from "next-intl";
import EditIcon from '@mui/icons-material/Edit';
import * as Yup from "yup";

const ShowLoanForm = () => {
    const t = useTranslations();

    // initial values
    const initialValues = {
        national_code: "0312288875",
        postal_code: "326585475",
        national_card_serial_num: "0312288875",
        address: "تهران - ثنایی - مطهری ساختمان مهتاب",
        birth_date: "10/25/44",
        navgan_id: "14575"
    };
    // end initial values

    // validation
    const validationSchema = Yup.object().shape({
        national_code: Yup.string().required(t("showLoan.error_message_national_code")),
        postal_code: Yup.string().required(t("showLoan.error_message_postal_code")),
        national_card_serial_num: Yup.string().required(t("showLoan.error_message_national_card_serial_num")),
        address: Yup.string().required(t("showLoan.error_message_address")),
        birth_date: Yup.string().required(t("showLoan.error_message_birth_date")),
        navgan_id: Yup.string().required(t("showLoan.error_message_navgan_id")),
    });
    // end validation

    // submit
    const handleSubmit = async (values, props) => {
        const formData = new FormData();
        formData.append("national_code", values.national_code);
        formData.append("postal_code", values.postal_code);
        formData.append("national_card_serial_num", values.national_card_serial_num);
        formData.append("address", values.address);
        formData.append("birth_date", values.birth_date);
        formData.append("navgan_id", values.navgan_id);
    };
    // 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="national_code"
                                    disabled
                                    variant="standard"
                                    size="small"
                                    label={t("showLoan.text_field_national_code")}
                                    placeholder={t("showLoan.text_field_enter_your_national_code")}
                                    type={"text"}
                                    error={!!(props.touched.national_code && props.errors.national_code)}
                                    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="birth_date"
                                    disabled
                                    variant="standard"
                                    size="small"
                                    label={t("showLoan.text_field_birth_date")}
                                    placeholder={t(
                                        "showLoan.text_field_enter_your_birth_date"
                                    )}
                                    type={"text"}
                                    error={!!(props.touched.birth_date && props.errors.birth_date)}
                                    fullWidth
                                    helperText={
                                        props.touched.birth_date
                                            ? props.errors.birth_date
                                            : null
                                    }
                                />
                            </Box>
                            <Box
                                sx={{
                                    mx: {xs: 0, sm: 2},
                                    my: 2,
                                    width: "100%",
                                }}
                            >
                                <Field
                                    as={TextField}
                                    sx={{width: "100%"}}
                                    name="national_card_serial_num"
                                    disabled
                                    variant="standard"
                                    size="small"
                                    label={t("showLoan.text_field_national_card_serial_num")}
                                    placeholder={t(
                                        "showLoan.text_field_enter_your_national_card_serial_num"
                                    )}
                                    type={"text"}
                                    error={!!(props.touched.national_card_serial_num && props.errors.national_card_serial_num)}
                                    fullWidth
                                    helperText={
                                        props.touched.national_card_serial_num
                                            ? props.errors.national_card_serial_num
                                            : 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="address"
                                    variant="outlined"
                                    size="small"
                                    label={t("showLoan.text_field_address")}
                                    placeholder={t("showLoan.text_field_enter_your_address")}
                                    type={"text"}
                                    error={!!(props.touched.address && props.errors.address)}
                                    fullWidth
                                    helperText={props.touched.address ? props.errors.address : null}
                                />
                            </Box>
                            <Box
                                sx={{
                                    mx: {xs: 0, sm: 2},
                                    my: 2,
                                    width: "100%",
                                }}
                            >
                                <Field
                                    as={TextField}
                                    sx={{width: "100%"}}
                                    name="postal_code"
                                    variant="outlined"
                                    size="small"
                                    label={t("showLoan.text_field_postal_code")}
                                    placeholder={t(
                                        "showLoan.text_field_enter_your_postal_code"
                                    )}
                                    type={"text"}
                                    error={!!(props.touched.postal_code && props.errors.postal_code)}
                                    fullWidth
                                    helperText={
                                        props.touched.postal_code
                                            ? props.errors.postal_code
                                            : null
                                    }
                                />
                            </Box>
                            <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("showLoan.text_field_navgan_id")}
                                    placeholder={t(
                                        "showLoan.text_field_enter_your_navgan_id"
                                    )}
                                    type={"text"}
                                    error={!!(props.touched.navgan_id && props.errors.navgan_id)}
                                    fullWidth
                                    helperText={
                                        props.touched.navgan_id
                                            ? props.errors.navgan_id
                                            : null
                                    }
                                />
                            </Box>
                        </Box>
                        <Box
                            sx={{
                                mx: {xs: 0, sm: 2},
                                display: "flex",
                                justifyContent: "end"
                            }}
                        >
                            <Button
                                fullWidth
                                type="submit"
                                variant="contained"
                                size="large"
                                sx={{
                                    mt: 2,
                                    width: "fit-content",
                                    display: "flex",
                                }}
                                endIcon={<EditIcon/>}
                                disabled={props.isSubmitting}
                            >
                                {t("showLoan.button_submit")}
                            </Button>
                        </Box>
                    </StyledForm>
                </Stack>
            )}
        </Formik>
    );
};

export default ShowLoanForm;
