import type React from 'react';
import { useCallback, useRef, useState } from 'react';
import cs from 'classnames';
import classes from './WaveForm.module.scss';
import { View } from 'tuikit-atomicx-react/chat';

interface WaveFormProps {
  progress: number;
  duration?: number | undefined;
  onSeek: (progress: number) => void;
  waveBarColor?: string | undefined;
  waveBarActiveColor?: string | undefined;
}

function WaveForm(props: WaveFormProps) {
  const { progress, onSeek, waveBarColor, waveBarActiveColor } = props;
  const [hoverPosition, setHoverPosition] = useState<number | null>(null);
  const waveRef = useRef<HTMLDivElement>(null);

  const waveHeights = useRef<number[]>([]);

  waveHeights.current = useRef(
    Array.from({ length: 15 }, () => Math.random() * 16 + 4),
  ).current;

  const handleWaveMouseMove = (e: React.MouseEvent) => {
    if (!waveRef.current) {
      return;
    }

    const rect = waveRef.current.getBoundingClientRect();
    const position = ((e.clientX - rect.left) / rect.width) * 100;
    setHoverPosition(Math.max(0, Math.min(100, position)));
  };

  const handleWaveMouseLeave = () => {
    setHoverPosition(null);
  };

  const handleWaveClick = (e: React.MouseEvent) => {
    if (!waveRef.current) {
      return;
    }

    const rect = waveRef.current.getBoundingClientRect();
    const position = (e.clientX - rect.left) / rect.width;
    onSeek(position);
  };

  const isActive = useCallback((index: number) => {
    if (progress === 0) {
      return false;
    }
    return (index / waveHeights.current.length) * 100 < progress * 100;
  }, [progress]);

  return (
    <View
      ref={waveRef}
      className={classes['wave-form']}
      onMouseMove={handleWaveMouseMove}
      onMouseLeave={handleWaveMouseLeave}
      onClick={handleWaveClick}
    >
      {waveHeights.current.map((height, index) => (
        <View
          key={index}
          className={cs(classes['wave-form__bar'], {
            [classes['wave-form__bar--active']]:
              isActive(index),
          })}
          style={{ height: `${height}px`, backgroundColor: isActive(index) ? waveBarActiveColor : waveBarColor }}
        />
      ))}
      {hoverPosition !== null && (
        <View
          className={classes['wave-form__cursor']}
          style={{ left: `${hoverPosition}%` }}
        />
      )}
    </View>
  );
}

export default WaveForm;