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

import React from 'react';
import {
  DropdownMenu,
} from '../components/organisms/menus/DropdownMenu';
import {
  BaseCompoundWC,
  camelToKebab,
  installPropAccessors,
  type PropDefs,
  registerWC,
  portalNode,
  dispatchEvent,
} from './_shared';

const PROP_DEFS: PropDefs = {
  open: 'boolean',
  width: 'string',
  side: 'string',
  align: 'string',
  sideOffset: 'number',
  alignOffset: 'number',
};

class DropdownMenuWC 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 triggerSlot = this._getSlot('trigger');
    const contentSlot = this._getDefaultSlot();

    return React.createElement(
      DropdownMenu.Simple,
      {
        open: props.open as boolean | undefined,
        onOpenChange: (open: boolean) => dispatchEvent(this, 'open-change', open),
        trigger: triggerSlot
          ? React.createElement('span', { style: { display: 'contents' } }, portalNode(triggerSlot))
          : React.createElement('span', null, 'Trigger'),
      },
      contentSlot
        ? React.createElement(
            DropdownMenu.Popup,
            {
              width: (props.width as 'auto' | 'sm' | 'md' | 'lg') || 'auto',
              side: (props.side as 'top' | 'right' | 'bottom' | 'left') || 'bottom',
              align: (props.align as 'start' | 'center' | 'end') || 'start',
              sideOffset: (props.sideOffset as number) || 4,
              alignOffset: (props.alignOffset as number) || 0,
            },
            React.createElement(DropdownMenu.Items, null, portalNode(contentSlot)),
          )
        : null,
    );
  }
}

installPropAccessors(DropdownMenuWC, PROP_DEFS);
registerWC('hf-dropdown-menu', DropdownMenuWC);

export { DropdownMenuWC };
export default DropdownMenuWC;
