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

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

const PROP_DEFS: PropDefs = {
  content: 'string',
  supportingText: 'string',
  side: 'string',
  align: 'string',
  sideOffset: 'number',
  delayDuration: 'number',
};

class TooltipWC 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 defaultSlot = this._getDefaultSlot();

    if (!props.content) {
      return React.createElement(
        'span',
        {
          style: { display: 'contents' },
        },
        defaultSlot ? portalNode(defaultSlot) : null,
      );
    }

    const triggerElement = defaultSlot
      ? React.createElement('span', { style: { display: 'contents' } }, portalNode(defaultSlot))
      : null;

    if (!triggerElement) {
      return React.createElement(React.Fragment, null);
    }

    return React.createElement(Tooltip, {
      content: props.content as string,
      supportingText: props.supportingText as string | undefined,
      side: (props.side as 'top' | 'right' | 'bottom' | 'left') || 'top',
      align: (props.align as 'start' | 'center' | 'end') || 'center',
      sideOffset: (props.sideOffset as number) ?? 6,
      delayDuration: props.delayDuration as number | undefined,
      trigger: triggerElement,
    });
  }
}

installPropAccessors(TooltipWC, PROP_DEFS);
registerWC('hf-tooltip', TooltipWC);

export { TooltipWC };
export default TooltipWC;