import UploadSystem from "@/core/components/UploadSystem";
import {CONFIRM_TRANSPORTATION_ASSISTANCE} from "@/core/data/apiRoutes";
import useDirection from "@/lib/app/hooks/useDirection";
import {
    Button,
    Dialog,
    DialogActions,
    DialogContent,
    DialogContentText,
    DialogTitle,
    Stack,
    TextField, Typography,
} from "@mui/material";
import {useFormik} from "formik";
import {useTranslations} from "next-intl";
import {useState} from "react";
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";

const ConfirmForm = ({open, handleClose, rowId, confirmData}) => {
    const t = useTranslations();
    const {directionApp} = useDirection();
    const [description, setDescription] = useState("");
    const [selectedImage, setSelectedImage] = useState("");
    const [fileType, setfileType] = useState(null);
    const [fileName, setfileName] = useState(null);
    const [showAddIcon, setShowAddIcon] = useState(true);

    const formik = useFormik({
        initialValues: {
            description: "",
        },
        onSubmit: () => {
            const formData = new FormData();
            if (description != "") formData.append("expert_description", description);
            handleClose();
            confirmData(CONFIRM_TRANSPORTATION_ASSISTANCE, rowId, formData);
        },
    });

    const handleDescriptionChange = (event) => {
        setDescription(event.target.value);
    };
    const handleUploadChange = (event) => {
        const uploadedFile = event.target?.files?.[0];
        if (uploadedFile) {
            const maxFileSize = 2 * 1024 * 1024;
            if (uploadedFile.size > maxFileSize) {
                UploadFileNotification(directionApp, t);
                event.target.value = "";
                return;
            }

            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);
            setShowAddIcon(false);
        }
    };
    return (
        <Dialog fullWidth open={open}
                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("ConfirmDialog.confirm")}</DialogTitle>
            <DialogContent>
                <Stack spacing={2}>
                    <Stack>
                        <TextField
                            name="description"
                            multiline
                            rows={8}
                            label={<>
                                <span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
                            value={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 /*width*/, 150 /*height*/]}
                            setShowAddIcon={setShowAddIcon}
                            showAddIcon={showAddIcon}
                        />
                    </Stack>
                </Stack>
            </DialogContent>
            <DialogActions>
                <Button onClick={handleClose} variant="outlined" color="secondary" autoFocus>
                    {t("ConfirmDialog.button-cancel")}
                </Button>
                <Button onClick={formik.handleSubmit} variant="contained" color="primary">
                    {t("ConfirmDialog.button-confirm")}
                </Button>
            </DialogActions>
        </Dialog>
    );
};
export default ConfirmForm;