import * as React from 'react';
import { createComponent, type EventName } from '@lit/react';
import { PieSwitch as PieSwitchLit } from './index';
import { type SwitchProps } from './defs';

export * from './defs';

const PieSwitchReact = createComponent({
    displayName: 'PieSwitch',
    elementClass: PieSwitchLit,
    react: React,
    tagName: 'pie-switch',
    events: {
        onInvalid: 'invalid' as EventName<Event>,
        onChange: 'change' as EventName<CustomEvent>, // when the switch checked state is changed.
    },
});

type ReactBaseType = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'>

type PieSwitchEvents = {
    onInvalid?: (event: Event) => void;
    onChange?: (event: CustomEvent) => void;
};

export const PieSwitch = PieSwitchReact as React.ForwardRefExoticComponent<React.PropsWithChildren<Omit<React.PropsWithoutRef<SwitchProps>, 'children'>>
    & React.RefAttributes<PieSwitchLit> & PieSwitchEvents & ReactBaseType>;