"use client";

import { Stack } from "@mantine/core";
import ServicesDesktopHeader from "@/app/services/components/desktop/ServicesDesktopHeader/ServicesDesktopHeader";
import ServicesMobileHeader from "@/app/services/components/mobile/ServicesMobileHeader/ServicesMobileHeader";
import ServicesKitsTable from "@/app/services/components/shared/ServicesKitTable/ServicesKitTable";
import ServicesTable from "@/app/services/components/shared/ServicesTable/ServicesTable";
import { ServicesTab } from "@/app/services/components/shared/ServiceTabSegmentedControl/ServiceTabSegmentedControl";
import { useServicesContext } from "@/app/services/contexts/ServicesContext";
import PageBlock from "@/components/layout/PageBlock/PageBlock";
import useIsMobile from "@/hooks/utils/useIsMobile";

const PageBody = () => {
    const isMobile = useIsMobile();
    const { servicesTab, setServicesTab } = useServicesContext();

    const getPageBody = () => {
        switch (servicesTab) {
            case ServicesTab.PRODUCT_SERVICE:
            case ServicesTab.DEAL_SERVICE:
                return <ServicesTable />;
            case ServicesTab.SERVICES_KITS:
                return <ServicesKitsTable />;
            default:
                return <>-</>;
        }
    };

    return (
        <Stack h={"100%"}>
            {!isMobile && (
                <PageBlock>
                    <ServicesDesktopHeader
                        serviceTab={servicesTab}
                        onServiceTabChange={setServicesTab}
                    />
                </PageBlock>
            )}
            <PageBlock
                style={{ flex: 1, minHeight: 0 }}
                fullScreenMobile>
                <div
                    style={{
                        height: "100%",
                        display: "flex",
                        flexDirection: "column",
                    }}>
                    {isMobile && (
                        <ServicesMobileHeader
                            serviceTab={servicesTab}
                            onServiceTabChange={setServicesTab}
                        />
                    )}
                    <div style={{ flex: 1, overflow: "auto" }}>
                        {getPageBody()}
                    </div>
                </div>
            </PageBlock>
        </Stack>
    );
};

export default PageBody;
