expert-front/src/components/dashboard/passenger-office/Form/ConfirmForm/ConfirmContent.jsx

import UploadSystem from "@/core/components/UploadSystem";
import useNotification from "@/lib/app/hooks/useNotification";
import useRequest from "@/lib/app/hooks/useRequest";
import {Button, DialogActions, DialogContent, FormHelperText, Stack, TextField, Typography} from "@mui/material"
import {useFormik} from "formik";
import {useTranslations} from "next-intl";
import {CONFIRM_PASSENGER_OFFICE} from "@/core/data/apiRoutes";
import {useState} from "react";
import * as Yup from "yup";

const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
    const t = useTranslations();
    const [selectedImage, setSelectedImage] = useState("");
    const [fileType, setfileType] = useState(null);
    const [fileName, setfileName] = useState(null);
    const [showAddIcon, setShowAddIcon] = useState(true);
    const requestServer = useRequest({auth: true})
    const {update_notification} = useNotification()

    const validationSchema = Yup.object().shape({
        confirm_img: Yup.mixed().notRequired(t("ConfirmDialog.approved_amount_error"))
            .test('fileSize', `${t("PassengerOffice.upload_file_unit")}`, (value) => {
                if (!value) return true
                return value.size <= 5 * 1024 * 1024;
            })
            .test('fileType', `${t("PassengerOffice.upload_file_format")}`, (value) => {
                if (!value) return true
                const allowedTypes = ['image/jpg', 'image/jpeg', 'image/png', 'application/pdf']; // Define your allowed file types
                return allowedTypes.includes(value.type);
            })
    })

    const formik = useFormik({
        initialValues: {
            description: "",
            confirm_img: null
        }, validationSchema,
        onSubmit: (values, {setSubmitting}) => {
            const formData = new FormData();
            if (values.description != "") formData.append("description", values.description);
            if (values.confirm_img != null) formData.append("attachment", values.confirm_img);

            requestServer(`${CONFIRM_PASSENGER_OFFICE}/${rowId}`, 'post', {
                data: formData,
            }).then((response) => {
                setOpenConfirmDialog(false)
                mutate()
                update_notification()
            }).catch(() => {
            }).finally(() => {
                setSubmitting(false);
            });
        },
    });

    const handleDescriptionChange = (event) => {
        formik.setFieldValue("description", event.target.value)
    };

    const handleUploadChange = (event) => {
        const uploadedFile = event.target?.files?.[0];
        if (uploadedFile) {
            const fileType = event.target?.files?.[0].type;
            const fileName = event.target?.files?.[0].name;
            setSelectedImage(URL.createObjectURL(uploadedFile));
            setfileType(fileType);
            setfileName(fileName);
            formik.setFieldValue("confirm_img", uploadedFile).then(() => {
                formik.setFieldTouched("confirm_img", true);
            })
            setShowAddIcon(false);
        }
    };

    return (
        <>
            <DialogContent>
                <Stack spacing={2}>
                    <Stack>
                        <TextField
                            name="description"
                            multiline
                            rows={8}
                            label={<>
                                <span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
                            value={formik.values.description}
                            onChange={handleDescriptionChange}
                            fullWidth
                            variant="outlined"
                            sx={{mt: 1}}
                        />
                    </Stack>
                    <Stack>
                        <Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
                        <UploadSystem
                            selectedImage={selectedImage}
                            handleUploadChange={handleUploadChange} // Pass the updated function directly
                            setselectedImage={setSelectedImage}
                            setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
                            fieldname="confirm_img"
                            fileType={fileType}
                            fileName={fileName}
                            imageAlt={t("app_name")}
                            imageSize={[250, 150]}
                            setShowAddIcon={setShowAddIcon}
                            showAddIcon={showAddIcon}
                            onBlur={() => formik.handleBlur("confirm_img")}
                            error={
                                formik.touched.confirm_img &&
                                Boolean(formik.errors.confirm_img)
                            }
                        />
                        <FormHelperText
                            error={Boolean(formik.errors.confirm_img)}
                        >
                            {formik.touched.confirm_img && formik.errors.confirm_img}
                        </FormHelperText>
                    </Stack>
                </Stack>
            </DialogContent>
            <DialogActions>
                <Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
                        disabled={formik.isSubmitting} autoFocus>
                    {t("ConfirmDialog.button-cancel")}
                </Button>
                <Button onClick={formik.handleSubmit} variant="contained" color="primary"
                        disabled={formik.isSubmitting || !formik.isValid}>
                    {t("ConfirmDialog.button-confirm")}
                </Button>
            </DialogActions>
        </>
    )

}
export default ConfirmContent