import { IconMoodSad } from "@tabler/icons-react";
import { Group, Pagination, Stack, Text } from "@mantine/core";
import { useProductsTableColumns } from "@/app/products/components/shared/ProductsTable/columns";
import { useProductsContext } from "@/app/products/contexts/ProductsContext";
import useProductsActions from "@/app/products/hooks/useProductsActions";
import BaseTable from "@/components/ui/BaseTable/BaseTable";
import useIsMobile from "@/hooks/utils/useIsMobile";

const ProductsTable = () => {
    const isMobile = useIsMobile();
    const { productsCrud, products, productsFiltersForm, paginationInfo } =
        useProductsContext();
    const { onChangeClick, onPrintBarcodeClick } = useProductsActions();

    const columns = useProductsTableColumns({
        onChange: onChangeClick,
        onDelete: productsCrud.onDelete,
        onPrintBarcode: onPrintBarcodeClick,
    });

    return (
        <Stack
            h={"100%"}
            pb={"xs"}
            px={isMobile ? "xs" : ""}>
            <BaseTable
                withTableBorder
                records={products}
                columns={columns}
                groups={undefined}
                style={{
                    height: "100%",
                }}
                emptyState={
                    productsFiltersForm.values.client ? (
                        <Group
                            align={"center"}
                            gap={"xs"}>
                            <Text>Нет товаров</Text>
                            <IconMoodSad />
                        </Group>
                    ) : (
                        <Text>Выберите клиента для вывода товаров</Text>
                    )
                }
                verticalSpacing={"md"}
            />
            {paginationInfo && paginationInfo.totalPages > 1 && (
                <Group justify={"end"}>
                    <Pagination
                        withEdges
                        total={paginationInfo?.totalPages}
                        {...productsFiltersForm.getInputProps("page")}
                    />
                </Group>
            )}
        </Stack>
    );
};

export default ProductsTable;
