import React, { CSSProperties } from 'react';

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

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

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

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

type Props = {
  hsva: HsvaColor;
  onChange: (newAlpha: { a: number }) => void;
};

function Alpha({ hsva, onChange }: Props) {
  const ariaValue = round(hsva.a * 100);

  return (
    <Interactive
      className={styles.Wrapper}
      style={
        {
          '--internal-color-from': hsvaToHslaString({ ...hsva, a: 0 }),
          '--internal-color-to': hsvaToHslaString({ ...hsva, a: 1 }),
        } as CSSProperties
      }
      onMove={(interaction: InteractionProps) => {
        onChange({ a: interaction.left });
      }}
      onKey={(offset: InteractionProps) => {
        onChange({ a: clamp(hsva.a + offset.left) });
      }}
      aria-label="Alpha"
      aria-valuetext={`${ariaValue}%`}
      aria-valuenow={ariaValue}
      aria-valuemin="0"
      aria-valuemax="100"
    >
      <Pointer left={hsva.a} color={hsvaToHslaString(hsva)} />
    </Interactive>
  );
}

export default Alpha;
