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

import React from 'react';
import {
  Select,
  SelectPopup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '../components/atoms/forms/Select';
import {
  BaseCompoundWC,
  camelToKebab,
  installPropAccessors,
  type PropDefs,
  registerWC,
  dispatchEvent,
  asArray,
} from './_shared';

const PROP_DEFS: PropDefs = {
  options: 'json',
  value: 'string',
  defaultValue: 'string',
  placeholder: 'string',
  variant: 'string',
  size: 'string',
  disabled: 'boolean',
  "aria-label": 'string',
  "aria-labelledby": 'string',
  "aria-describedby": 'string',
  "aria-invalid": 'boolean',
  "aria-required": 'boolean',
};

interface SelectOptionDefinition {
  value: string;
  label: string;
  disabled?: boolean;
}

class SelectWC 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 options = asArray<SelectOptionDefinition>(props.options);
    const placeholder = props.placeholder as string | undefined;
    const variant = (props.variant as 'default' | 'filter' | 'badge') || 'default';
    const size = (props.size as 'sm' | 'default') || 'default';
    const disabled = props.disabled as boolean | undefined;

    const itemElements: React.ReactElement[] = [];
    for (const option of options) {
      itemElements.push(
        React.createElement(
          SelectItem,
          {
            key: option.value,
            value: option.value,
            disabled: option.disabled,
          },
          option.label,
        ),
      );
    }

    return React.createElement(
      Select,
      {
        value: props.value as string | undefined,
        defaultValue: props.defaultValue as string | undefined,
        onValueChange: (value: string) => dispatchEvent(this, 'value-change', value),
        disabled,
      },
      React.createElement(
        SelectTrigger,
        {
          variant,
          size,
          'aria-label': props['aria-label'] as string | undefined,
          'aria-labelledby': props['aria-labelledby'] as string | undefined,
          'aria-describedby': props['aria-describedby'] as string | undefined,
          'aria-invalid': props['aria-invalid'] as boolean | undefined,
          'aria-required': props['aria-required'] as boolean | undefined,
        },
        React.createElement(SelectValue, { placeholder }),
      ),
      React.createElement(SelectPopup, null, ...itemElements),
    );
  }
}

installPropAccessors(SelectWC, PROP_DEFS);
registerWC('hf-select', SelectWC);

export { SelectWC };
export default SelectWC;