import {Select} from "@mantine/core";
import useServiceCategoriesList from "../../hooks/useServiceCategoriesList.tsx";
import {ServiceCategorySchema} from "../../../../client";
import {FC, ReactNode} from "react";

type Props = {
    fullWidth?: boolean,
    defaultValue?: ServiceCategorySchema
    onChange: (category: ServiceCategorySchema) => void
    error?: ReactNode
}
const ServiceCategorySelect: FC<Props> = ({defaultValue, onChange, fullWidth, error}) => {
    const {categories} = useServiceCategoriesList();

    return (
        <Select
            error={error}
            w={fullWidth ? "100%" : undefined}
            checkIconPosition={"right"}
            label={"Категория услуги"}
            placeholder={"Выберите категорию услуги"}
            data={categories.map(category => ({
                label: category.name,
                value: category.id.toString()
            }))}
            onChange={event => {
                if (!event) return;
                const category = categories.find(category => category.id == parseInt(event))
                if (!category) return;
                onChange(category)
            }}
            value={defaultValue && defaultValue.id.toString()}
        />
    )
}

export default ServiceCategorySelect;