import * as React from 'react';
import { createComponent, type EventName } from '@lit/react';
import { PieSelect as PieSelectLit } from './index';
import { type SelectProps } from './defs';

export * from './defs';

const PieSelectReact = createComponent({
    displayName: 'PieSelect',
    elementClass: PieSelectLit,
    react: React,
    tagName: 'pie-select',
    events: {
        onChange: 'change' as EventName<CustomEvent>, // when the selected option is changed.
    },
});

type ReactBaseType = Omit<React.HTMLAttributes<HTMLSelectElement>, 'onChange'>

type PieSelectEvents = {
    onChange?: (event: CustomEvent) => void;
};

export const PieSelect = PieSelectReact as React.ForwardRefExoticComponent<React.PropsWithChildren<Omit<React.PropsWithoutRef<SelectProps>, 'children'>>
    & React.RefAttributes<PieSelectLit> & PieSelectEvents & ReactBaseType>;