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 {UPDATE_EXPERT} from "@/core/data/apiRoutes";
import PersonalInfo from "./PersonalInfo";
import UserInfo from "./UserInfo";
import RestInfo from "./RestInfo";

const UpdateContent = ({row, mutate, setOpenUpdateDialog}) => {
    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")),
        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: row.original.full_name,
            username: row.original.username,
            email: row.original.email,
            phone_number: row.original.phone_number,
            telephone_id: row.original.telephone_id,
            gender: row.original.gender,
            national_id: row.original.national_id,
            position: row.original.position,
            province_id: row.original.province_id,
            roles: row.original.roles[0]?.id
        },
        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("province_id", values.province_id);
            formData.append("position", values.position);
            formData.append("roles", values.roles);

            requestServer(`${UPDATE_EXPERT}/${row.original.id}`, 'post', {auth: true, data: formData})
                .then((response) => {
                    setOpenUpdateDialog(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={() => setOpenUpdateDialog(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 UpdateContent