import * as React from 'react';
import { createComponent, type EventName } from '@lit/react';
import { PieCookieBanner as PieCookieBannerLit } from './index';
import { type CookieBannerProps } from './defs';

export * from './defs';

const PieCookieBannerReact = createComponent({
    displayName: 'PieCookieBanner',
    elementClass: PieCookieBannerLit,
    react: React,
    tagName: 'pie-cookie-banner',
    events: {
        onPieCookieBannerAcceptAll: 'pie-cookie-banner-accept-all' as EventName<CustomEvent>, // when all cookies are accepted.
        onPieCookieBannerNecessaryOnly: 'pie-cookie-banner-necessary-only' as EventName<CustomEvent>, // when all only necessary cookies are accepted.
        onPieCookieBannerManagePrefs: 'pie-cookie-banner-manage-prefs' as EventName<CustomEvent>, // when a user clicks manage preferences.
        onPieCookieBannerPrefsSaved: 'pie-cookie-banner-prefs-saved' as EventName<CustomEvent>, // when a user clicks save preferences.
    },
});

type ReactBaseType = React.HTMLAttributes<HTMLElement>;

type PieCookieBannerEvents = {
    onPieCookieBannerAcceptAll?: (event: CustomEvent) => void;
    onPieCookieBannerNecessaryOnly?: (event: CustomEvent) => void;
    onPieCookieBannerManagePrefs?: (event: CustomEvent) => void;
    onPieCookieBannerPrefsSaved?: (event: CustomEvent) => void;
};

export const PieCookieBanner = PieCookieBannerReact as React.ForwardRefExoticComponent<React.PropsWithChildren<Omit<React.PropsWithoutRef<CookieBannerProps>, 'children'>>
    & React.RefAttributes<PieCookieBannerLit> & PieCookieBannerEvents & ReactBaseType>;