expert-front/src/components/dashboard/navgan/bank-management/Form/Reject/RejectContent.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 { useState } from "react";
import * as Yup from "yup";
import { REJECT_BANK_MANAGEMENT } from "@/core/data/apiRoutes";

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

    const validationSchema = Yup.object().shape({
        description: Yup.string().required(t("RejectDialog.description_error")),
        reject_img: Yup.mixed()
            .notRequired(t("RejectDialog.choose_file"))
            .test("fileSize", `${t("MachinaryOffice.upload_file_unit")}`, (value) => {
                return !value || (value.size && value.size <= 5 * 1024 * 1024);
            })
            .test("fileType", `${t("MachinaryOffice.upload_file_format")}`, (value) => {
                const allowedTypes = ["image/jpg", "image/jpeg", "image/png", "application/pdf"]; // Define your allowed file types
                return !value || (value.type && allowedTypes.includes(value.type));
            }),
    });

    const formik = useFormik({
        initialValues: {
            description: "",
            reject_img: null,
        },
        validationSchema,
        onSubmit: (values, { setSubmitting }) => {
            const formData = new FormData();
            formData.append("expert_description", values.description);
            if (values.reject_img != null) {
                const attachments = [
                    {
                        title: "فایل ضمیمه کارتابل نظارت بانک",
                        file: values.reject_img,
                    },
                ];
                attachments.forEach((attachment, index) => {
                    formData.append(`attachment[${index}][title]`, attachment.title);
                    formData.append(`attachment[${index}][file]`, attachment.file);
                });
            }
            requestServer(`${REJECT_BANK_MANAGEMENT}/${rowId}`, "post", {
                data: formData,
            })
                .then((response) => {
                    setOpenRejectDialog(false);
                    mutate();
                    update_notification();
                })
                .catch(() => {})
                .finally(() => {
                    setSubmitting(false);
                });
        },
    });

    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("reject_img", uploadedFile).then(() => {
                formik.setFieldTouched("reject_img", true);
            });
            setShowAddIcon(false);
        }
    };
    return (
        <>
            <DialogContent>
                <Stack spacing={2}>
                    <Stack>
                        <TextField
                            name="description"
                            multiline
                            rows={8}
                            label={t("RejectDialog.description")}
                            value={formik.values.description}
                            onChange={formik.handleChange}
                            onBlur={formik.handleBlur("description")}
                            error={formik.touched.description && Boolean(formik.errors.description)}
                            helperText={formik.touched.description && formik.errors.description}
                            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="reject_img"
                            fileType={fileType}
                            fileName={fileName}
                            imageAlt={t("app_name")}
                            imageSize={[250 /*width*/, 150 /*height*/]}
                            setShowAddIcon={setShowAddIcon}
                            showAddIcon={showAddIcon}
                            onBlur={() => formik.handleBlur("reject_img")}
                            error={formik.touched.reject_img && Boolean(formik.errors.reject_img)}
                        />
                        <FormHelperText error={Boolean(formik.errors.reject_img)}>
                            {formik.touched.reject_img && formik.errors.reject_img}
                        </FormHelperText>
                    </Stack>
                </Stack>
            </DialogContent>
            <DialogActions>
                <Button
                    onClick={() => setOpenRejectDialog(false)}
                    variant="outlined"
                    color="secondary"
                    disabled={formik.isSubmitting}
                    autoFocus
                >
                    {t("RejectDialog.button-cancel")}
                </Button>
                <Button
                    onClick={formik.handleSubmit}
                    variant="contained"
                    color="primary"
                    disabled={formik.isSubmitting || !formik.dirty || !formik.isValid}
                >
                    {t("RejectDialog.button-reject")}
                </Button>
            </DialogActions>
        </>
    );
};
export default RejectContent;