import LtrTextField from "@/core/components/LtrTextField";
import MuiDatePicker from "@/core/components/MuiDatePicker";
import MuiTimePicker from "@/core/components/MuiTimePicker";
import { FINISH_MISSION } from "@/core/utils/routes";
import useRequest from "@/lib/hooks/useRequest";
import { yupResolver } from "@hookform/resolvers/yup";
import { Button, DialogActions, DialogContent, Stack, Typography } from "@mui/material";
import { format } from "date-fns-jalali";
import { useState } from "react";
import { Controller, useForm } from "react-hook-form";
import { mixed, object, string } from "yup";

const FinishMissionContent = ({ rowId, mutate, setOpenFinishMissionDialog }) => {
    const [submitting, setSubmitting] = useState(false);
    const requestServer = useRequest({ notificationSuccess: true });

    const validationSchema = object().shape({
        end_km: string().required("لطفاً کیلومتر را وارد کنید."),
        start_date: mixed().required("تاریخ خروج خودرو را مشخص کنید."),
        start_time: mixed().required("ساعت خروج خودرو را مشخص کنید."),
    });

    const {
        control,
        handleSubmit,
        formState: { isSubmitting },
    } = useForm({
        defaultValues: {
            end_km: "",
            start_date: null,
            start_time: null,
        },
        resolver: yupResolver(validationSchema),
        mode: "all",
    });

    const onSubmit = (values) => {
        const formattedDate = values.start_date;
        const formattedTime = format(values.start_time, "HH:mm");
        requestServer(`${FINISH_MISSION}/${rowId}`, "post", {
            data: {
                end_km: values.end_km,
                time: `${formattedDate} ${formattedTime}`,
            },
            hasSidebarUpdate: true,
        })
            .then(() => {
                mutate();
                setOpenFinishMissionDialog(false);
                setSubmitting(false);
            })
            .catch(() => {
                setSubmitting(false);
            });
    };

    return (
        <>
            <DialogContent>
                <Stack alignItems="center" spacing={2}>
                    <Typography mt={2}>آیا از ورود خودرو و پایان ماموریت اطمینان دارید؟</Typography>
                    <Stack sx={{ width: "87%" }}>
                        <Controller
                            control={control}
                            name={"end_km"}
                            render={({ field, fieldState: { error } }) => (
                                <LtrTextField
                                    autoComplete="off"
                                    type="tel"
                                    value={field.value}
                                    onChange={(e) => {
                                        if (isNaN(Number(e.target.value))) return;
                                        field.onChange(e.target.value);
                                    }}
                                    size="small"
                                    sx={{ width: "100%" }}
                                    fullWidth
                                    label="کیلومتر خودرو / ساعت کار"
                                    InputLabelProps={{ shrink: true }}
                                />
                            )}
                        />
                    </Stack>
                    <Stack>
                        <Controller
                            control={control}
                            name={"start_date"}
                            render={({ field, fieldState: { error } }) => (
                                <MuiDatePicker
                                    name="start_date"
                                    error={error}
                                    value={field.value || null}
                                    disableFuture={false}
                                    placeholder={"تاریخ پایان ماموریت را وارد کنید"}
                                    label={"تاریخ پایان ماموریت"}
                                    setFieldValue={(name, value) => field.onChange(value || null)}
                                    helperText={error ? error.message : null}
                                />
                            )}
                        />
                    </Stack>
                    <Stack>
                        <Controller
                            control={control}
                            name={"start_time"}
                            render={({ field, fieldState: { error } }) => (
                                <MuiTimePicker
                                    name="start_time"
                                    error={error}
                                    value={field.value || null}
                                    views={["hours", "minutes"]}
                                    placeholder={"زمان پایان ماموریت را وارد کنید"}
                                    label={"زمان پایان ماموریت"}
                                    setFieldValue={(name, value) => field.onChange(value || null)}
                                    helperText={error ? error.message : null}
                                />
                            )}
                        />
                    </Stack>
                </Stack>
            </DialogContent>
            <DialogActions sx={{ justifyContent: "center", paddingBottom: 2, width: "100%" }}>
                <Button onClick={() => setOpenFinishMissionDialog(false)} variant="outlined" color="secondary">
                    خیر !
                </Button>
                <Button onClick={handleSubmit(onSubmit)} variant="contained" color="primary" disabled={submitting}>
                    {submitting ? "درحال ثبت..." : "بله اطمینان دارم"}
                </Button>
            </DialogActions>
        </>
    );
};

export default FinishMissionContent;