import { RGBA, rgbToHex } from '@vev/utils';
import React, { CSSProperties, useMemo } from 'react';
import { SilkeSlider } from '../silke-slider';
import styles from './color-picker.scss';

type SilkeOpacitySliderProps = {
  rgba: RGBA;
  onChange: (rgba: RGBA) => void;
};

export function SilkeOpacitySlider({ rgba, onChange }: SilkeOpacitySliderProps) {
  const hex = useMemo(() => rgbToHex(rgba), [rgba]);
  const { a } = rgba;

  return (
    <SilkeSlider
      className={styles.opacitySlider}
      trackClassName={styles.track}
      handleClassName={styles.handle}
      style={
        {
          '--track-bg': `linear-gradient(to right, rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, 0), #${hex}), var(--transparent-bg)`,
        } as CSSProperties
      }
      value={a || a === 0 ? a : 1}
      onChange={(a) => onChange({ ...rgba, a })}
    />
  );
}