import LoadingHardPage from "@/core/components/LoadingHardPage";
import { CALL_ACTION } from "@/core/utils/routes";
import { useCall } from "@/lib/contexts/call";
import useRequest from "@/lib/hooks/useRequest";
import { yupResolver } from "@hookform/resolvers/yup";
import { Box, Stack } from "@mui/material";
import { useForm } from "react-hook-form";
import { object, string } from "yup";
import ActionHeader from "./ActionHeader";
import CallActionDescription from "./CallActionDescription";
import CallActionsCategories from "./CallActionsCategories";
import CallActionsSubcategories from "./CallActionsSubcategories";

const defaultValues = {
    description: "",
    category_id: "",
    subcategory_id: "",
};

const validationSchema = object({
    category_id: string().required("لطفا نام کاربری را وارد کنید!"),
    subcategory_id: string().required("لطفا رمز عبور را وارد کنید!"),
});

function CallActions({ tab }) {
    const requestServer = useRequest();
    const { closeCall } = useCall();

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

    const onSubmit = handleSubmit(async (data) => {
        try {
            const formData = new FormData();
            data.description != "" && formData.append("description", data.description);
            formData.append("category_id", data.category_id);
            formData.append("subcategory_id", data.subcategory_id);
            await requestServer(`${CALL_ACTION}/${tab.id}`, "post", {
                data: formData,
            });
            closeCall(tab.id);
        } catch (error) {}
    });

    return (
        <Stack
            sx={{
                height: "100%",
            }}
        >
            <ActionHeader tab={tab} />
            <Stack sx={{ height: "100%", overflowY: "auto", position: "relative" }}>
                <CallActionDescription control={control} />
                <CallActionsCategories control={control} />
                <CallActionsSubcategories control={control} onSubmit={onSubmit} />
                {isSubmitting && (
                    <Box
                        sx={{
                            position: "absolute",
                            width: "100%",
                            height: "100%",
                            opacity: 0.9,
                            zIndex: 9999,
                        }}
                    >
                        <LoadingHardPage width={80} height={80} loading={true} sx={{ position: "absolute" }} />
                    </Box>
                )}
            </Stack>
        </Stack>
    );
}

export default CallActions;