import { JSX } from '@ionic/core/components';
import { IonBackButton as IonBackButtonCmp } from '@ionic/core/components/ion-back-button.js';
import { IonRouterOutlet as IonRouterOutletCmp } from '@ionic/core/components/ion-router-outlet.js';
import { IonTabBar as IonTabBarCmp } from '@ionic/core/components/ion-tab-bar.js';
import { IonTabButton as IonTabButtonCmp } from '@ionic/core/components/ion-tab-button.js';
import { JSX as IoniconsJSX } from 'ionicons';
import { IonIcon as IonIconCmp } from 'ionicons/components/ion-icon.js';

import { /*@__PURE__*/ createReactComponent } from './react-component-lib';

export const IonTabButtonInner = /*@__PURE__*/ createReactComponent<
  JSX.IonTabButton & { onIonTabButtonClick?: (e: CustomEvent) => void },
  HTMLIonTabButtonElement
>('ion-tab-button', IonTabButtonCmp);
export const IonTabBarInner = /*@__PURE__*/ createReactComponent<
  JSX.IonTabBar,
  HTMLIonTabBarElement
>('ion-tab-bar', IonTabBarCmp);
export const IonBackButtonInner = /*@__PURE__*/ createReactComponent<
  Omit<JSX.IonBackButton, 'icon'>,
  HTMLIonBackButtonElement
>('ion-back-button', IonBackButtonCmp);
export const IonRouterOutletInner = /*@__PURE__*/ createReactComponent<
  JSX.IonRouterOutlet & {
    setRef?: (val: HTMLIonRouterOutletElement) => void;
    forwardedRef?: React.ForwardedRef<HTMLIonRouterOutletElement>;
  },
  HTMLIonRouterOutletElement
>('ion-router-outlet', IonRouterOutletCmp);

// ionicons
export const IonIconInner = /*@__PURE__*/ createReactComponent<
  IoniconsJSX.IonIcon,
  HTMLIonIconElement
>('ion-icon', IonIconCmp);