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

import React from 'react';
import { AppShell, appShellBackgrounds } from '../components';
import {
  BaseCompoundWC,
  camelToKebab,
  installPropAccessors,
  type PropDefs,
  portalNode,
  registerWC,
} from './_shared';

const PROP_DEFS: PropDefs = {
  background: 'string',
  height: 'string',
  padding: 'string',
  mobilePadding: 'string',
  gap: 'string',
  connected: 'boolean',
};

class AppShellWC 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 sidebarSlot = this._getSlot('sidebar');
    const contentSlot = this._getSlot('content') || this._getDefaultSlot();

    const children: React.ReactNode[] = [];
    if (sidebarSlot) {
      children.push(portalNode(sidebarSlot));
    }
    if (contentSlot) {
      children.push(portalNode(contentSlot));
    }

    const parsePadding = (value: unknown): number | string | undefined => {
      if (value === undefined || value === null) return undefined;
      if (typeof value === 'number') return value;
      if (typeof value === 'string') {
        const parsed = Number(value);
        return Number.isNaN(parsed) ? value : parsed;
      }
      return undefined;
    };

    return React.createElement(
      AppShell,
      {
        background: (props.background as string) || appShellBackgrounds.appBg,
        height: (props.height as string) || '100vh',
        padding: parsePadding(props.padding) ?? 16,
        mobilePadding: parsePadding(props.mobilePadding),
        gap: parsePadding(props.gap) ?? 12,
        connected: props.connected === true || props.connected === 'true',
      },
      ...children,
    );
  }
}

installPropAccessors(AppShellWC, PROP_DEFS);
registerWC('hf-app-shell', AppShellWC);

export { AppShellWC };
export default AppShellWC;