import { FC } from "react";
import { Fieldset, Stack, TagsInput, TextInput } from "@mantine/core";
import BarcodeTemplateSelect from "@/app/products/components/shared/BarcodeTemplateSelect/BarcodeTemplateSelect";
import { UseFormReturnType } from "@mantine/form";
import { ProductSchema } from "@/lib/client";

type Props = {
    form: UseFormReturnType<Partial<ProductSchema>>;
}

const CharacteristicsTab: FC<Props> = ({ form }) => (
    <>
        <Fieldset legend={"Основные характеристики"}>
            <Stack gap={"xs"}>
                <TextInput
                    placeholder={"Введите название товара"}
                    label={"Название товара"}
                    {...form.getInputProps("name")}
                    withAsterisk
                />
                <TextInput
                    placeholder={"Введите артикул"}
                    label={"Артикул"}
                    {...form.getInputProps("article")}
                />
                <TextInput
                    placeholder={"Введите складской артикул"}
                    label={"Складской артикул"}
                    {...form.getInputProps("factoryArticle")}
                />
                <BarcodeTemplateSelect
                    placeholder={"Выберите шаблон штрихкода"}
                    label={"Шаблон штрихкода"}
                    {...form.getInputProps("barcodeTemplate")}
                    onChange={template => {
                        form.setFieldValue("barcodeTemplate", template);
                        form.setFieldValue(
                            "barcodeTemplateId",
                            template?.id
                        );
                    }}
                    withAsterisk
                />
                <TagsInput
                    placeholder={
                        !form.values.barcodes?.length
                            ? "Добавьте штрихкоды к товару"
                            : ""
                    }
                    label={"Штрихкоды"}
                    {...form.getInputProps("barcodes")}
                />
            </Stack>
        </Fieldset>
        <Fieldset legend={"Дополнительные характеристики"}>
            <Stack gap={"xs"}>
                <TextInput
                    placeholder={"Введите бренд"}
                    label={"Бренд"}
                    {...form.getInputProps("brand")}
                />
                <TextInput
                    placeholder={"Введите состав"}
                    label={"Состав"}
                    {...form.getInputProps("composition")}
                />
                <TextInput
                    placeholder={"Введите цвет"}
                    label={"Цвет"}
                    {...form.getInputProps("color")}
                />
                <TextInput
                    placeholder={"Введите размер"}
                    label={"Размер"}
                    {...form.getInputProps("size")}
                />
                <TextInput
                    placeholder={"Введите доп. информацию"}
                    label={"Доп. информация"}
                    {...form.getInputProps("additionalInfo")}
                />
            </Stack>
        </Fieldset>
    </>
)

export default CharacteristicsTab;
