/**
 * Web Component wrapper for AppSidebar (hand-crafted WC adapter).
 * Custom element: <hf-app-sidebar>
 *
 * @generated by scripts/generate-wc-components.ts
 * DO NOT EDIT MANUALLY
 */

import React from 'react';
import { AppSidebar } from '../components';
import { SidebarInset, SidebarProvider } from '../components/ui/sidebar';
import {
  BaseCompoundWC,
  camelToKebab,
  dispatchEvent,
  installPropAccessors,
  type PropDefs,
  portalNode,
  registerWC,
} from './_shared';

const PROP_DEFS: PropDefs = {
  navItems: 'json',
  activeNavItemId: 'string',
  account: 'json',
  logo: 'json',
  showRecentChats: 'boolean',
  collapsible: 'string',
  connected: 'boolean',
  defaultOpen: 'boolean',
  side: 'string',
  compactedLogo: 'string',
  sidebarBgColor: 'string',
  rounded: 'boolean',
  logoSubtext: 'string',
};

type NavSubItemDef = {
  label: string;
  badge?: string | number;
  href?: string;
  isActive?: boolean;
};

type NavItemDef = {
  id: string;
  icon: string;
  label: string;
  isActive?: boolean;
  href?: string;
  children?: NavSubItemDef[];
};

class AppSidebarWC 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 contentSlot = this._getSlot('content');

    const navItems = (props.navItems as NavItemDef[]) || [];

    const account = props.account as
      | {
          name: string;
          subtitle: string;
          avatarSrc?: string;
          isOnline?: boolean;
        }
      | undefined;

    const logo = props.logo as
      | {
          src?: string;
          alt?: string;
        }
      | undefined;

    const handleNavItemClick = (item: { id: string; label: string }) => {
      dispatchEvent(this, 'nav-item-click', item);
    };

    const handleOpenChange = (open: boolean) => {
      dispatchEvent(this, 'open-change', open);
    };

    const sidebarChildren: React.ReactElement[] = [];

    sidebarChildren.push(
      React.createElement(
        AppSidebar,
        {
          key: 'sidebar',
          collapsible:
            (props.collapsible as 'offcanvas' | 'icon' | 'none') || 'icon',
          side: (props.side as 'left' | 'right') || 'left',
          rounded: props.rounded as boolean,
          sidebarBgColor: props.sidebarBgColor as string,
          logoSubtext: props.logoSubtext as string,
          logo: logo
            ? logo.src
              ? React.createElement('img', {
                  src: logo.src,
                  alt: logo.alt || 'Logo',
                })
              : null
            : undefined,
        },
        navItems.length > 0 &&
          React.createElement(
            AppSidebar.Nav,
            { key: 'nav' },
            ...navItems.map((item) =>
              React.createElement(
                AppSidebar.NavItem,
                {
                  key: item.id,
                  icon: React.createElement('span', null, '\u2022'),
                  label: item.label,
                  isActive: item.isActive || item.id === props.activeNavItemId,
                  href: item.href,
                  onClick: () => handleNavItemClick(item),
                },
                ...(item.children
                  ? item.children.map((child, idx) =>
                      React.createElement(AppSidebar.NavSub, {
                        key: `${item.id}-sub-${idx}`,
                        label: child.label,
                        badge: child.badge,
                        href: child.href,
                        isActive: child.isActive,
                      }),
                    )
                  : []),
              ),
            ),
          ),
        account &&
          React.createElement(AppSidebar.Account, {
            key: 'account',
            name: account.name,
            subtitle: account.subtitle,
            avatarSrc: account.avatarSrc,
            isOnline: account.isOnline,
          }),
      ),
    );

    if (contentSlot) {
      sidebarChildren.push(
        React.createElement(
          SidebarInset,
          { key: 'inset', connected: props.connected as boolean },
          portalNode(contentSlot),
        ),
      );
    }

    return React.createElement(
      SidebarProvider,
      {
        defaultOpen: (props.defaultOpen as boolean) ?? true,
        onOpenChange: handleOpenChange,
        connected: props.connected as boolean,
      },
      ...sidebarChildren,
    );
  }
}

installPropAccessors(AppSidebarWC, PROP_DEFS);
registerWC('hf-app-sidebar', AppSidebarWC);

export { AppSidebarWC };
export default AppSidebarWC;
