"use client";

import { Stack } from "@mantine/core";
import BarcodeTemplatesDesktopHeader from "@/app/barcode-templates/components/desktop/BarcodeTemplatesDesktopHeader/BarcodeTemplatesDesktopHeader";
import BarcodeTemplatesMobileHeader from "@/app/barcode-templates/components/mobile/BarcodeTemplatesMobileHeader/BarcodeTemplatesMobileHeader";
import BarcodeTemplatesTable from "@/app/barcode-templates/components/shared/BarcodeTemplatesTable/BarcodeTemplatesTable";
import useBarcodeTemplateActions from "@/app/barcode-templates/hooks/useBarcodeTemplateActions";
import { useBarcodeTemplatesCrud } from "@/app/barcode-templates/hooks/useBarcodeTemplatesCrud";
import useBarcodeTemplatesList from "@/app/barcode-templates/hooks/useBarcodeTemplatesList";
import PageBlock from "@/components/layout/PageBlock/PageBlock";
import useIsMobile from "@/hooks/utils/useIsMobile";

const PageBody = () => {
    const isMobile = useIsMobile();
    const { barcodeTemplates, queryKey } = useBarcodeTemplatesList();
    const barcodeTemplatesCrud = useBarcodeTemplatesCrud({ queryKey });

    const { onCreate, onChange } = useBarcodeTemplateActions();

    return (
        <Stack h={"100%"}>
            {!isMobile && (
                <PageBlock>
                    <BarcodeTemplatesDesktopHeader onCreateClick={onCreate} />
                </PageBlock>
            )}
            <PageBlock
                style={{ flex: 1, minHeight: 0 }}
                fullScreenMobile>
                <Stack
                    gap={"xs"}
                    h={"100%"}>
                    {isMobile && (
                        <BarcodeTemplatesMobileHeader
                            onCreateClick={onCreate}
                        />
                    )}
                    <div style={{ flex: 1, overflow: "auto" }}>
                        <BarcodeTemplatesTable
                            items={barcodeTemplates}
                            onChange={onChange}
                            onDelete={barcodeTemplatesCrud.onDelete}
                        />
                    </div>
                </Stack>
            </PageBlock>
        </Stack>
    );
};

export default PageBody;
