import { REQUEST_MISSION_VIOLATIONS_PROCESS } from "@/core/utils/routes";
import useRequest from "@/lib/hooks/useRequest";
import { AddCircleOutline, Close } from "@mui/icons-material";
import { Dialog, IconButton, Tooltip } from "@mui/material";
import moment from "jalali-moment";
import { useState } from "react";
import CreateForm from "./Form";

const CreateWithoutProcess = ({ row, mutate }) => {
    const [submitting, setSubmitting] = useState(false);
    const requestServer = useRequest({ notificationSuccess: true });
    const [open, setOpen] = useState(false);

    const handleOpen = () => {
        setOpen(true);
    };

    const submitForm = async (result) => {
        setSubmitting(true);

        await requestServer(`${REQUEST_MISSION_VIOLATIONS_PROCESS}/${row.original.id}`, "post", {
            data: {
                explanation: result.explanation,
                category_id: result.category_id,
                ...(result.rahdaran.length != 0 ? { rahdaran: result.rahdaran.map((r) => r.id) } : {}),
                zone: result.region,
                end_point: result.end_point,
                start_date: `${result.start_date} ${moment(result.start_time).format("HH:mm")}`,
                end_date: `${result.end_date} ${moment(result.end_time).format("HH:mm")}`,
                driver: result.driver.id,
                encoded_route: result.area,
            },
            hasSidebarUpdate: true,
        })
            .then((response) => {
                mutate();
                setOpen(false);
            })
            .catch((error) => {})
            .finally(() => {
                setSubmitting(false);
            });
    };

    return (
        <>
            <Tooltip title="تصحیح ماموریت" arrow placement="left">
                <IconButton aria-label="تصحیح ماموریت" color="primary" onClick={handleOpen}>
                    <AddCircleOutline sx={{ fontSize: "25px" }} />
                </IconButton>
            </Tooltip>

            <Dialog open={open} fullWidth maxWidth="md">
                <IconButton
                    aria-label="close"
                    onClick={() => setOpen(false)}
                    sx={(theme) => ({
                        position: "absolute",
                        right: 8,
                        top: 8,
                        zIndex: 50,
                        color: theme.palette.grey[500],
                    })}
                >
                    <Close />
                </IconButton>
                {open && (
                    <CreateForm
                        defaultValues={{
                            explanation: "",
                            category_id: "",
                            road_observed_id: "",
                            rahdaran: [],
                            start_date: "",
                            start_time: null,
                            end_date: "",
                            end_time: null,
                            end_point: "",
                            region: "",
                            driver: null,
                            area: null,
                            locations: [],
                        }}
                        submitForm={submitForm}
                        submitting={submitting}
                        setOpen={setOpen}
                    />
                )}
            </Dialog>
        </>
    );
};
export default CreateWithoutProcess;