import React from 'react';

interface VolumeInputProps {
  show: boolean;
  volume: number;
  onVolumeChange: (volume: number) => void;
  onMouseEnter: () => void;
  onMouseLeave: () => void;
}

interface ProgressCSSProps extends React.CSSProperties {
  '--progress-width': number;
}

export default function VolumeInput({
  show,
  volume,
  onVolumeChange,
  onMouseEnter,
  onMouseLeave,
}: VolumeInputProps) {
  const volumeBarWidth = Number.isNaN(volume / 1) ? 0 : volume / 1;

  const progressStyles: ProgressCSSProps = {
    '--progress-width': volumeBarWidth,
  };
  return (
    show && (
      <div
        onMouseLeave={onMouseLeave}
        onMouseEnter={onMouseEnter}
        className="absolute -right-[82px] -top-[130px] z-50 flex h-14 w-[196px] -rotate-90 items-center border border-solid border-[#E2E4E9] bg-[#fff] px-2 py-3"
      >
        <div className="relative flex justify-center">
          <input
            aria-label="volume"
            name="volume"
            type="range"
            min={0}
            step={0.05}
            max={1}
            value={volume}
            style={progressStyles}
            className="progress-bar  inset-0 m-0 h-1 w-[150px] cursor-pointer appearance-none rounded-full bg-[#272B35]/15 before:absolute before:inset-0 before:inline-block before:h-1 before:w-full before:origin-left before:bg-[#4D67BE]"
            onChange={(e) => {
              onVolumeChange(e.currentTarget.valueAsNumber);
            }}
          />
        </div>
        <span className="flex min-w-[37px] rotate-90 justify-center text-[12px] text-[#272B35]">
          {Math.ceil(volume * 100)}%
        </span>
      </div>
    )
  );
}
