import * as React from 'react';
import { createComponent, type EventName } from '@lit/react';
import { PieTextarea as PieTextareaLit } from './index';
import { type TextareaProps } from './defs';

export * from './defs';

const PieTextareaReact = createComponent({
    displayName: 'PieTextarea',
    elementClass: PieTextareaLit,
    react: React,
    tagName: 'pie-textarea',
    events: {
        onInput: 'input' as EventName<InputEvent>, // when the textarea value is changed.
        onChange: 'change' as EventName<CustomEvent>, // when the textarea value is changed.
    },
});

type ReactBaseType = Omit<React.HTMLAttributes<HTMLTextAreaElement>, 'onChange' | 'onInput'>

type PieTextareaEvents = {
    onInput?: (event: InputEvent) => void;
    onChange?: (event: CustomEvent) => void;
};

export const PieTextarea = PieTextareaReact as React.ForwardRefExoticComponent<React.PropsWithChildren<Omit<React.PropsWithoutRef<TextareaProps>, 'children'>>
    & React.RefAttributes<PieTextareaLit> & PieTextareaEvents & ReactBaseType>;