/**
 * Web Component wrapper for Tabs (auto-generated).
 * Custom element: <hf-tabs>
 *
 * @generated by scripts/generate-wc-components.ts
 * DO NOT EDIT MANUALLY
 */

import React from 'react';
import {
  Tabs,
  TabsContent,
  TabsIndicator,
  TabsList,
  TabsTrigger,
} from '../components/molecules/navigation/Tabs';
import {
  BaseCompoundWC,
  camelToKebab,
  installPropAccessors,
  type PropDefs,
  registerWC,
  portalNode,
  dispatchEvent,
  asArray,
} from './_shared';

const PROP_DEFS: PropDefs = {
  tabs: 'json',
  value: 'string',
  defaultValue: 'string',
  variant: 'string',
  align: 'string',
  orientation: 'string',
};

interface TabDefinition {
  value: string;
  label: string;
  count?: number;
  disabled?: boolean;
}

class TabsWC extends BaseCompoundWC {
  get propDefs() {
    return PROP_DEFS;
  }

  static get observedAttributes() {
    return Object.keys(PROP_DEFS).map(camelToKebab);
  }

  protected _renderReact(): React.ReactElement {
    const props = this._readAllProps();
    const tabs = asArray<TabDefinition>(props.tabs);
    const variant = (props.variant as string) || 'default';
    const align = (props.align as string) || 'start';
    const orientation = (props.orientation as string) || 'horizontal';

    const triggerElements: React.ReactElement[] = [];
    for (const tab of tabs) {
      triggerElements.push(
        React.createElement(
          TabsTrigger,
          {
            key: 'trigger-' + tab.value,
            value: tab.value,
            disabled: tab.disabled,
          },
          tab.label,
        ),
      );
    }

    if (variant === 'underline') {
      triggerElements.push(React.createElement(TabsIndicator, { key: 'indicator' }));
    }

    const contentElements: React.ReactElement[] = [];
    for (const tab of tabs) {
      const slotName = 'panel-' + tab.value;
      const slotContent = this._getSlot(slotName);

      contentElements.push(
        React.createElement(
          TabsContent,
          {
            key: 'content-' + tab.value,
            value: tab.value,
          },
          slotContent ? portalNode(slotContent) : null,
        ),
      );
    }

    return React.createElement(
      Tabs,
      {
        value: props.value as string | undefined,
        defaultValue: props.defaultValue as string | undefined,
        onValueChange: (value: string) => dispatchEvent(this, 'value-change', value),
        orientation: orientation as 'horizontal' | 'vertical',
      },
      React.createElement(
        TabsList,
        {
          variant: variant as 'default' | 'line' | 'underline',
          align: align as 'start' | 'center' | 'end' | 'stretch',
        },
        ...triggerElements,
      ),
      ...contentElements,
    );
  }
}

installPropAccessors(TabsWC, PROP_DEFS);
registerWC('hf-tabs', TabsWC);

export { TabsWC };
export default TabsWC;