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

const Delete = ({rowId, mutate}) => {
    const t = useTranslations();
    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
    const [isSubmitting, setIsSubmitting] = useState(false)
    const requestServer = useRequest({auth: true})
    const {update_notification} = useNotification()
    const handleSubmit = () => {
        setIsSubmitting(true)
        requestServer(`${DELETE_ADMIN_SETTING}/${rowId}`, 'delete').then((response) => {
            mutate()
            update_notification()
        }).catch(() => {
        }).finally(() => {
            setIsSubmitting(false)
        });
    }

    return (
        <>
            <Tooltip title={t("DeleteDialog.delete")}>
                <IconButton
                    color="primary"
                    onClick={() => {
                        setOpenConfirmDialog(true)
                    }}
                >
                    <DeleteIcon/>
                </IconButton>
            </Tooltip>
            <Dialog maxWidth="sm" 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("DeleteDialog.delete")}</DialogTitle>
                <DialogContent>
                    <Typography>{t("DeleteDialog.typography")}</Typography>
                </DialogContent>
                <DialogActions>
                    <Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
                            disabled={isSubmitting} autoFocus>
                        {t("DeleteDialog.button-cancel")}
                    </Button>
                    <Button onClick={handleSubmit} variant="contained" color="primary"
                            disabled={isSubmitting}>
                        {t("DeleteDialog.button-delete")}
                    </Button>
                </DialogActions>
            </Dialog>
        </>
    );
};
export default Delete;