import {Box, Button, Chip, DialogActions, DialogContent, Divider,} from "@mui/material";
import * as Yup from "yup";
import {useTranslations} from "next-intl";
import {useFormik} from "formik";
import useRequest from "@/lib/app/hooks/useRequest";
import {ADD_EXPERT} from "@/core/data/apiRoutes";
import PersonalInfo from "@/components/dashboard/expert-management/Form/CreateForm/CreateContent/PersonalInfo";
import UserInfo from "@/components/dashboard/expert-management/Form/CreateForm/CreateContent/UserInfo";
import RestInfo from "@/components/dashboard/expert-management/Form/CreateForm/CreateContent/RestInfo";

const CreateContent = ({setOpenCreateDialog, mutate}) => {
    const t = useTranslations();
    const requestServer = useRequest()

    const validationSchema = Yup.object().shape({
        full_name: Yup.string().required(t("ExpertMangement.error_message_full_name")),
        username: Yup.string().required(t("ExpertMangement.error_message_username")),
        email: Yup.string().required(t("ExpertMangement.error_message_email")),
        phone_number: Yup.string().required(t("ExpertMangement.error_message_phone_number")),
        telephone_id: Yup.string().required(t("ExpertMangement.error_message_telephone_id")),
        gender: Yup.string().required(t("ExpertMangement.error_message_gender")),
        national_id: Yup.string().required(t("ExpertMangement.error_message_national_id")),
        password: Yup.string()
            .required(t("ExpertMangement.error_message_password"))
            .matches(
                /^(?=.*[a-zA-Z])(?=.*\d).{8,}$/,
                t("ExpertMangement.error_message_password_regex")
            ),
        position: Yup.string().required(t("ExpertMangement.error_message_position")),
        province_id: Yup.string().required(t("ExpertMangement.error_message_province_id")),
        roles: Yup.string().required(t("ExpertMangement.error_message_roles"))
    });

    const formik = useFormik({
        initialValues: {
            full_name: "",
            username: "",
            email: "",
            phone_number: "",
            telephone_id: "",
            gender: "",
            national_id: "",
            password: "",
            position: "",
            province_id: "",
            roles: ""
        },
        validationSchema,
        onSubmit: (values, {setSubmitting}) => {
            const formData = new FormData();
            formData.append("full_name", values.full_name);
            formData.append("national_id", values.national_id);
            formData.append("phone_number", values.phone_number);
            formData.append("telephone_id", values.telephone_id);
            formData.append("gender", values.gender);
            formData.append("email", values.email);
            formData.append("username", values.username);
            formData.append("password", values.password);
            formData.append("province_id", values.province_id);
            formData.append("position", values.position);
            formData.append("roles", values.roles);

            requestServer(`${ADD_EXPERT}`, 'post', {auth: true, data: formData})
                .then((response) => {
                    setOpenCreateDialog(false)
                    mutate()
                }).catch(() => {
            }).finally(() => {
                setSubmitting(false);
            });
        },
    });

    return (
        <>
            <DialogContent>
                <Box sx={{my: 1}}>
                    <Divider>
                        <Chip
                            label={t("ExpertMangement.personal_info")}
                        />
                    </Divider>
                </Box>
                <PersonalInfo formik={formik}/>
                <Box sx={{my: 1}}>
                    <Divider>
                        <Chip
                            label={t("ExpertMangement.user_info")}
                        />
                    </Divider>
                </Box>
                <UserInfo formik={formik}/>
                <Box sx={{my: 1}}>
                    <Divider>
                        <Chip
                            label={t("ExpertMangement.rest_info")}
                        />
                    </Divider>
                </Box>
                <RestInfo formik={formik}/>
            </DialogContent>
            <DialogActions>
                <Button onClick={() => setOpenCreateDialog(false)} variant="outlined" color="secondary"
                        disabled={formik.isSubmitting} autoFocus>
                    {t("ExpertMangement.button_cancel")}
                </Button>
                <Button onClick={formik.handleSubmit} variant="contained" color="primary"
                        disabled={formik.isSubmitting || !formik.isValid || !formik.dirty}>
                    {t("ExpertMangement.button_confirm")}
                </Button>
            </DialogActions>
        </>
    )
}

export default CreateContent