expert-front/src/components/dashboard/user-management/Form/CreateForm/CreateContent.jsx

import {
    Button,
    DialogActions,
    DialogContent,
    FormControl,
    FormHelperText,
    InputLabel,
    MenuItem,
    Select,
    Stack,
    TextField
} from "@mui/material";
import {useTranslations} from "next-intl";
import useRequest from "@/lib/app/hooks/useRequest";
import * as Yup from "yup";
import {useFormik} from "formik";
import {ADD_USER_MANAGEMENT} from "@/core/data/apiRoutes";

const CreateContent = ({mutate, fetchUrl, setOpenConfirmDialog}) => {
    const t = useTranslations();
    const requestServer = useRequest({auth: true})
    const validationSchema = Yup.object().shape({
        phone_number: Yup.mixed().test("is-number", `${t("AddDialog.phone_number_number")}`, (value) => !isNaN(value)).test("positive", `${t("AddDialog.phone_number_positive")}`, (value) => value >= 0)
            .test("max", `${t("AddDialog.phone_number_max")}`, (value) => value.length <= 11)
            .required(t("AddDialog.phone_number_error")),
        national_id: Yup.mixed().test("is-number", `${t("AddDialog.national_id_number")}`, (value) => !isNaN(value)).test("positive", `${t("AddDialog.national_id_positive")}`, (value) => value >= 0)
            .test("max", `${t("AddDialog.national_id_max")}`, (value) => value.length <= 10)
            .required(t("AddDialog.national_id_error")),
        type_id: Yup.number().required(t("AddDialog.type_id_error")),
        navgan_id: Yup.number().when('type_id', {
            is: 1, // Condition: Check if type_id is equal to 1
            then: (schema) => schema.required(t("AddDialog.navgan_id_error")),
            otherwise: (schema) => schema, // No validation for navgan_id when type_id is not 1
        })
    });

    const formik = useFormik({
        initialValues: {
            phone_number: "",
            national_id: "",
            type_id: "",
            navgan_id: "",
        }, validationSchema, onSubmit: (values, {setSubmitting}) => {
            const formData = new FormData();
            formData.append("phone_number", values.phone_number);
            formData.append("national_id", values.national_id);
            formData.append("type_id", values.type_id);
            if (formik.values.type_id === 1) formData.append("navgan_id", values.navgan_id);

            requestServer(ADD_USER_MANAGEMENT, 'post', {
                data: formData,
            }).then((response) => {
                setOpenConfirmDialog(false)
                mutate(fetchUrl)
                update_notification()
            }).catch(() => {
            }).finally(() => {
                setSubmitting(false);
            });
        },
    });

    return (
        <>
            <DialogContent>
                <Stack spacing={2}>
                    <Stack>
                        <TextField
                            name="phone_number"
                            rows={8}
                            label={t("AddDialog.phone_number")}
                            type="text"
                            inputProps={{
                                inputMode: "number", min: 0, pattern: "[0-9]*",
                            }}
                            value={formik.values.phone_number}
                            onChange={(event) => {
                                if (event.target.value.length <= 11) return formik.handleChange(event)
                            }}
                            fullWidth
                            variant="outlined"
                            onBlur={formik.handleBlur("phone_number")}
                            error={formik.touched.phone_number && Boolean(formik.errors.phone_number)}
                            helperText={formik.touched.phone_number && formik.errors.phone_number}
                            sx={{mt: 1}}
                        />
                    </Stack>
                    <Stack>
                        <TextField
                            name="national_id"
                            rows={8}
                            label={t("AddDialog.national_id")}
                            value={formik.values.national_id}
                            onChange={(event) => {
                                if (event.target.value.length <= 10) return formik.handleChange(event)
                            }}
                            fullWidth
                            variant="outlined"
                            onBlur={formik.handleBlur("national_id")}
                            error={formik.touched.national_id && Boolean(formik.errors.national_id)}
                            helperText={formik.touched.national_id && formik.errors.national_id}
                            sx={{mt: 1}}
                        />
                    </Stack>
                    <Stack>
                        <FormControl
                            error={formik.touched.type_id && Boolean(formik.errors.type_id)}
                        >
                            <InputLabel>{t("AddDialog.type_id")}</InputLabel>
                            <Select
                                name="type_id"
                                onBlur={formik.handleBlur("type_id")}
                                label={t("AddDialog.type_id")}
                                value={formik.values.type_id}
                                onChange={formik.handleChange}
                                fullWidth
                                variant="outlined"

                                sx={{mt: 1}}
                            >
                                <MenuItem value={1}>
                                    {t("AddDialog.navgan")}
                                </MenuItem>
                                <MenuItem value={2}>
                                    {t("AddDialog.refahi")}
                                </MenuItem>
                            </Select>
                            <FormHelperText>
                                {formik.touched.type_id && formik.errors.type_id}
                            </FormHelperText>
                        </FormControl>
                    </Stack>
                    <Stack>
                        {formik.values.type_id === 1 ? (<TextField
                            name="navgan_id"
                            rows={8}
                            label={t("AddDialog.navgan_id")}
                            value={formik.values.navgan_id}
                            onChange={formik.handleChange}
                            fullWidth
                            variant="outlined"
                            onBlur={formik.handleBlur("navgan_id")}
                            error={formik.touched.navgan_id && Boolean(formik.errors.navgan_id)}
                            helperText={formik.touched.navgan_id && formik.errors.navgan_id}
                            sx={{mt: 1}}
                        />) : null}
                    </Stack>
                </Stack>
            </DialogContent>
            <DialogActions>
                <Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
                        disabled={formik.isSubmitting} autoFocus>
                    {t("AddDialog.button-cancel")}
                </Button>
                <Button onClick={formik.handleSubmit} variant="contained" color="primary"
                        disabled={formik.isSubmitting}>
                    {t("AddDialog.button-add")}
                </Button>
            </DialogActions>
        </>
    )
}
export default CreateContent