import React from 'react';
import { useFormField } from '../../hooks';
import { FormFieldProps } from '../silke-form';
import { SilkeSlider, SilkeSliderProps } from '../silke-slider';
import styles from './color-picker.scss';
import { HueType, useHue } from './hue';

type SilkeHueSliderProps<T extends HueType, U extends T | T[]> = FormFieldProps<U> &
  Pick<
    SilkeSliderProps<number[]>,
    'onTrackClick' | 'onRequestRemove' | 'style' | 'trackStyle' | 'handleStyle'
  >;

export function SilkeHueSlider<T extends HueType, U extends T | T[]>(
  props: SilkeHueSliderProps<T, U>,
) {
  const { value, onChange, ...rest } = useFormField(props);
  const [hue, setHue] = useHue(value);

  const handleChange = (hue: number[]) => {
    const value = setHue(hue);
    onChange?.(value);
  };

  return (
    <SilkeSlider
      className={styles.hueSlider}
      trackClassName={styles.track}
      handleClassName={styles.handle}
      disableOrder
      value={hue}
      onChange={handleChange}
      {...(rest as any)}
    />
  );
}