"use client";

import { Flex, Stack, 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 ProductsMobileHeader = () => {
    const { productsFiltersForm } = useProductsContext();
    const { onCreateClick } = useProductsActions();

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

export default ProductsMobileHeader;
