"use client";

import { Flex, Group, TextInput } from "@mantine/core";
import { useProductsContext } from "@/app/products/contexts/ProductsContext";
import useProductsActions from "@/app/products/hooks/useProductsActions";
import InlineButton from "@/components/ui/InlineButton/InlineButton";
import ClientSelect from "@/modules/dealModularEditorTabs/Clients/components/ClientSelect";

const ProductsDesktopHeader = () => {
    const { productsFiltersForm } = useProductsContext();
    const { onCreateClick } = useProductsActions();

    return (
        <Group justify={"space-between"}>
            <Flex gap={"xs"}>
                <ClientSelect
                    {...productsFiltersForm.getInputProps("client")}
                />
                <InlineButton
                    onClick={onCreateClick}
                    disabled={!productsFiltersForm.values.client}>
                    Создать
                </InlineButton>
            </Flex>
            <Flex>
                <TextInput
                    placeholder={"Артикул, название, шк"}
                    {...productsFiltersForm.getInputProps("searchInput")}
                />
            </Flex>
        </Group>
    );
};

export default ProductsDesktopHeader;
