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

import React from 'react';
import {
  HoverCard,
  HoverCardPopup,
  HoverCardTrigger,
} from '../components/organisms/overlays/HoverCard';
import {
  BaseCompoundWC,
  camelToKebab,
  installPropAccessors,
  type PropDefs,
  registerWC,
  portalNode,
} from './_shared';

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

class HoverCardWC 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._getSlot('content') || this._getDefaultSlot();

    return React.createElement(
      HoverCard,
      {},
      triggerSlot
        ? React.createElement(HoverCardTrigger, {
            render: React.createElement('span', { style: { display: 'contents' } }, portalNode(triggerSlot)),
          })
        : null,
      contentSlot
        ? React.createElement(
            HoverCardPopup,
            {
              side: (props.side as 'top' | 'right' | 'bottom' | 'left') || 'bottom',
              align: (props.align as 'start' | 'center' | 'end') || 'center',
              sideOffset: (props.sideOffset as number) || 4,
              alignOffset: (props.alignOffset as number) || 4,
            },
            portalNode(contentSlot),
          )
        : null,
    );
  }
}

installPropAccessors(HoverCardWC, PROP_DEFS);
registerWC('hf-hover-card', HoverCardWC);

export { HoverCardWC };
export default HoverCardWC;