import {
    Button,
    Dialog,
    DialogActions,
    DialogContent,
    DialogTitle,
    IconButton,
    Tooltip, Typography
} from "@mui/material";
import {useTranslations} from "next-intl";
import {useState} from "react";
import RepartitionIcon from '@mui/icons-material/Repartition';
import useRequest from "@/lib/app/hooks/useRequest";
import useNotification from "@/lib/app/hooks/useNotification";
import {RESERVE_MACHINARY_LOAN} from "@/core/data/apiRoutes";

const ReserveForm = ({rowId, mutate}) => {
    const t = useTranslations();
    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
    const requestServer = useRequest({auth: true, notification: true});
    const [isSubmitting, setIsSubmitting] = useState(false);
    const {update_notification} = useNotification()

    const handleSubmit = () => {
        setIsSubmitting(true)
        requestServer(`${RESERVE_MACHINARY_LOAN}/${rowId}`, 'post').then((response) => {
            setOpenConfirmDialog(false)
            mutate()
            update_notification()
        }).catch(() => {
        }).finally(() => {
            setIsSubmitting(false)
        });
    }

    return (
        <>
            <Tooltip title={t("MachinaryOffice.button-reserve-confirm")}>
                <IconButton
                    color="primary"
                    onClick={() => {
                        setOpenConfirmDialog(true)
                    }}
                >
                    <RepartitionIcon/>
                </IconButton>
            </Tooltip>
            <Dialog
                open={openConfirmDialog}
                PaperProps={{
                    sx: {
                        transition: 'all .3s',
                        boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'
                    }
                }}
                maxWidth="sm"
            >
                <DialogTitle>
                    {t("MachinaryOffice.reserve-loan-title")}
                </DialogTitle>
                <DialogContent>
                    <Typography> {t("MachinaryOffice.description-reserve-loan-first")} {rowId} {t("MachinaryOffice.description-reserve-loan-second")}</Typography>
                </DialogContent>
                <DialogActions>
                    <Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary" disabled={isSubmitting}>{t("MachinaryOffice.button-reserve-cancel")}</Button>
                    <Button onClick={() => handleSubmit()} variant="contained" color="primary" disabled={isSubmitting}>
                        {t("MachinaryOffice.button-reserve-confirm")}
                    </Button>
                </DialogActions>
            </Dialog>
        </>
    )

}
export default ReserveForm;