import React from 'react';

import type { HsvaColor } from '@/mui/helpers/color';
import { clamp, hsvaToHslString, round } from '@/mui/helpers/color';

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

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

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

function HueControl({ hsva, onChange }: Props) {
  return (
    <Interactive
      className={styles.Hue}
      style={
        {
          '--internal-pointer-left': `${(hsva.h / 360) * 100}%`,
          '--internal-pointer-top': '50%',
          '--internal-pointer-color': hsvaToHslString({
            h: hsva.h,
            s: 100,
            v: 100,
            a: 1,
          }),
        } as React.CSSProperties
      }
      onMove={(interaction: InteractionProps) => {
        onChange({ h: 360 * interaction.left });
      }}
      onKey={(offset: InteractionProps) => {
        onChange({
          h: clamp(hsva.h + offset.left * 360, 0, 360),
        });
      }}
      aria-label="Hue"
      aria-valuenow={round(hsva.h)}
      aria-valuemax="360"
      aria-valuemin="0"
    />
  );
}

export default React.memo(HueControl);
