import React from 'react';

import { clamp, hsvaToHslString, round } from '../../helpers';

import Interactive, { InteractionProps } from '../Interactive/Interactive';
import Pointer from '../Pointer/Pointer';

import styles from './Hue.module.scss';

type Props = {
  hue: number;
  onChange: (newHue: { h: number }) => void;
};

function Hue({ hue, onChange }: Props) {
  return (
    <Interactive
      className={styles.Wrapper}
      onMove={(interaction: InteractionProps) => {
        onChange({ h: 360 * interaction.left });
      }}
      onKey={(offset: InteractionProps) => {
        onChange({
          h: clamp(hue + offset.left * 360, 0, 360),
        });
      }}
      aria-label="Hue"
      aria-valuenow={round(hue)}
      aria-valuemax="360"
      aria-valuemin="0"
    >
      <Pointer
        left={hue / 360}
        color={hsvaToHslString({
          h: hue,
          s: 100,
          v: 100,
          a: 1,
        })}
      />
    </Interactive>
  );
}

export default React.memo(Hue);
