import {FC} from "react";
import ObjectSelect, {ObjectSelectProps} from "../../ObjectSelect/ObjectSelect.tsx";
import {ServiceSchema} from "../../../client";
import useServicesList from "../../../pages/ServicesPage/hooks/useServicesList.tsx";
import {omit} from "lodash";
import {ServiceType} from "../../../shared/enums/ServiceType.ts";
import {ComboboxItem, OptionsFilter} from "@mantine/core";
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error
import {ComboboxParsedItemGroup} from "@mantine/core/lib/components/Combobox/Combobox.types";


type RestProps = {
    filterType?: ServiceType;
}
type Props = Omit<ObjectSelectProps<ServiceSchema>, 'data'> & RestProps;
const ServiceSelectNew: FC<Props> = (props: Props) => {
    const {services} = useServicesList();
    const data = props.filterType ? services.filter(service => service.serviceType === props.filterType) : services;

    const restProps = omit(props, ['filterType']);
    const optionsFilter: OptionsFilter = ({options, search}) => {
        return (options as ComboboxParsedItemGroup<ComboboxItem>[]).map((option) => {
                return {
                    ...option,
                    items:
                        option.items.filter((item: ComboboxItem) => item.label.toLowerCase().includes(search.toLowerCase()))
                }
            }
        );
    };
    return (
        <ObjectSelect
            searchable
            {...restProps}
            data={data}
            groupBy={item => item.category.name}
            filter={optionsFilter}
        />
    )
}
export default ServiceSelectNew;