import React from 'react';

import type { HsvaColor } from '../../types';

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

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

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

type Props = {
  hsva: HsvaColor;
  onChange: (newColor: { s: number; v: number }) => void;
};

function Saturation({ hsva, onChange }: Props) {
  return (
    <Interactive
      className={styles.Wrapper}
      style={{
        backgroundColor: hsvaToHslString({
          h: hsva.h,
          s: 100,
          v: 100,
          a: 1,
        }),
      }}
      onMove={(interaction: InteractionProps) => {
        onChange({
          s: interaction.left * 100,
          v: 100 - interaction.top * 100,
        });
      }}
      onKey={(offset: InteractionProps) => {
        onChange({
          s: clamp(hsva.s + offset.left * 100, 0, 100),
          v: clamp(hsva.v - offset.top * 100, 0, 100),
        });
      }}
      aria-label="Color"
      aria-valuetext={`Saturation ${round(hsva.s)}%, Brightness ${round(hsva.v)}%`}
    >
      <Pointer saturation top={1 - hsva.v / 100} left={hsva.s / 100} color={hsvaToHslString(hsva)} />
    </Interactive>
  );
}

export default React.memo(Saturation);
