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

const AddForm = ({mutate, fetchUrl}) => {
    const t = useTranslations();
    const requestServer = useRequest({auth: true})
    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
    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().required(t("AddDialog.navgan_id_error")),
    });

    const formik = useFormik({
        initialValues: {
            phone_number: "",
            national_id: "",
            type_id: "",
            navgan_id: "",
        }, validationSchema,
        onSubmit: (values, {setSubmitting}) => {
            console.log("hello")
            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);
            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 (
        <Stack direction={"row"} spacing={2}>
            <Tooltip title={t("AddDialog.add")} arrow placement="right">
                <Button
                    color="primary"
                    variant="contained"
                    size="small"
                    sx={{textTransform: "unset", alignSelf: "center"}}
                    startIcon={<DataSaverOnIcon/>}
                    onClick={() => {
                        setOpenConfirmDialog(true)
                    }}
                >
                    {t("AddDialog.add")}
                </Button>
            </Tooltip>
            <Dialog fullWidth open={openConfirmDialog}
                    PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
                <DialogTitle>{t("AddDialog.add")}</DialogTitle>
                <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)
                                }
                                onBlur={formik.handleBlur("type_id")}
                            >
                                <InputLabel>{t("AddDialog.type_id")}</InputLabel>
                                <Select
                                    name="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.refahi")}
                                    </MenuItem>
                                    <MenuItem value={2}>
                                        {t("AddDialog.navgan")}
                                    </MenuItem>
                                </Select>
                                <FormHelperText>
                                    {formik.touched.type_id && formik.errors.type_id}
                                </FormHelperText>
                            </FormControl>
                        </Stack>
                        <Stack>
                            <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}}
                            />
                        </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>
            </Dialog>
        </Stack>
    );
};
export default AddForm;