/**
 * Web Component wrapper for Slider (hand-crafted WC adapter).
 * Custom element: <hf-slider>
 *
 * Keeps the attribute API serializable and exposes visual content through
 * named light-DOM slots.
 *
 * @generated by scripts/generate-wc-components.ts
 * DO NOT EDIT MANUALLY
 */

import React from 'react';
import {
  Slider,
  type SliderColor,
  type SliderDirection,
  type SliderMark,
  type SliderMode,
  type SliderSize,
  type SliderVariant,
} from '../components/atoms/forms/Slider';
import {
  BaseCompoundWC,
  camelToKebab,
  dispatchEvent,
  installPropAccessors,
  type PropDefs,
  portalNode,
  registerWC,
} from './_shared';

const PROP_DEFS: PropDefs = {
  value: 'json',
  defaultValue: 'json',
  min: 'number',
  max: 'number',
  step: 'number',
  disabled: 'boolean',
  orientation: 'string',
  name: 'string',
  dir: 'string',
  mode: 'string',
  variant: 'string',
  size: 'string',
  color: 'string',
  label: 'string',
  labelMode: 'string',
  ariaLabel: 'string',
  showMinMax: 'boolean',
  hint: 'string',
  marks: 'json',
};

function parseMarks(value: unknown): SliderMark[] | undefined {
  if (!Array.isArray(value)) return undefined;

  const marks = value.flatMap((mark) => {
    if (
      typeof mark !== 'object' ||
      mark === null ||
      typeof Reflect.get(mark, 'value') !== 'number' ||
      typeof Reflect.get(mark, 'label') !== 'string'
    ) {
      return [];
    }

    return [
      {
        value: Reflect.get(mark, 'value') as number,
        label: Reflect.get(mark, 'label') as string,
      },
    ];
  });

  return marks.length > 0 ? marks : undefined;
}

class SliderWC 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 startContent = portalNode(this._getSlot('start-content'));
    const endContent = portalNode(this._getSlot('end-content'));
    const thumbContent = portalNode(this._getSlot('thumb-content'));

    return React.createElement(Slider, {
      value: props.value as number | number[] | undefined,
      defaultValue: props.defaultValue as number | number[] | undefined,
      min: props.min as number | undefined,
      max: props.max as number | undefined,
      step: props.step as number | undefined,
      disabled: props.disabled as boolean | undefined,
      orientation: props.orientation as 'horizontal' | 'vertical' | undefined,
      name: props.name as string | undefined,
      dir: props.dir as SliderDirection | undefined,
      mode: props.mode as SliderMode | undefined,
      variant: props.variant as SliderVariant | undefined,
      size: props.size as SliderSize | undefined,
      color: props.color as SliderColor | undefined,
      label: props.label as string | undefined,
      labelMode: props.labelMode as 'none' | 'bottom' | 'floating' | undefined,
      'aria-label': props.ariaLabel as string | undefined,
      showMinMax: props.showMinMax as boolean | undefined,
      hint: props.hint as string | undefined,
      marks: parseMarks(props.marks),
      startContent,
      endContent,
      thumbContent,
      onValueChange: (value: number[]) =>
        dispatchEvent(this, 'value-change', value),
    });
  }
}

installPropAccessors(SliderWC, PROP_DEFS);
registerWC('hf-slider', SliderWC);

export { SliderWC };
export default SliderWC;