import CallActionsCategories from "./CallActionCategories";
import CallActionsSubcategories from "./CallActionSubcategories";
import ActionHeader from "./ActionHeader";
import CallActionDescription from "./CallActionDescription";
import {CALL_ACTION} from "@/core/data/apiRoutes";
import useRequest from "@/lib/app/hooks/useRequest";
import useAnswers from "@/lib/callWidget/hooks/useAnswers";
import {useState} from "react";
import {Stack} from "@mui/material";

function CallActions({tab}) {
    const [description, setDescription] = useState('')
    const requestServer = useRequest({auth: true});
    const {closeAnswerTab} = useAnswers();

    const handleSubcategoryButton = (category_id, subcategory_id) => {
        requestServer(`${CALL_ACTION}/${tab.id}`, "post", {
            data: {
                category_id,
                subcategory_id,
                description
            },
            success: {
                notification: {show: false},
            },
        })
            .then(() => {
                closeAnswerTab(tab.id);
            })
            .catch(() => {
            });
    };


    return (
        <Stack sx={{
            height: "100%",
            overflow: "hidden"
        }}>
            <ActionHeader tab={tab}/>
            <Stack sx={{height: "100%", overflow: "scroll"}}>
                <CallActionDescription setDescription={setDescription}/>
                <CallActionsCategories tab={tab}/>
                <CallActionsSubcategories handleSubcategoryButton={handleSubcategoryButton} tab={tab}/>
            </Stack>
        </Stack>
    );
}

export default CallActions;
