import React, { useState, useRef, useEffect } from 'react';
import audio from '../../assets/audio/sample.mp3'
import '../../assets/styles/Components/AudioPlayer.css';

const AudioPlayer = ({ progressControl = false }, audioSrc, title = "audio") => {
  const audioRef = useRef(null);
  const [isPlaying, setIsPlaying] = useState(false);
  const [progress, setProgress] = useState(0);
  const [duration, setDuration] = useState(0);
  const [currentTime, setCurrentTime] = useState(0);

  const togglePlay = () => {
    const audio = audioRef.current;
    if (isPlaying) {
      audio.pause();
    } else {
      audio.play();
    }
    setIsPlaying(!isPlaying);
  };

  const handleTimeUpdate = () => {
    const audio = audioRef.current;
    setCurrentTime(audio.currentTime);
    setProgress((audio.currentTime / audio.duration) * 100);
  };

  const handleLoadedMetadata = () => {
    const audio = audioRef.current;
    setDuration(audio.duration);
  };

  const handleEnded = () => {
    setIsPlaying(false);
    setProgress(0);
    setCurrentTime(0);
  };

  const formatTime = (time) => {
    const minutes = Math.floor(time / 60);
    const seconds = Math.floor(time % 60);
    return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
  };

  useEffect(() => {
    const audio = audioRef.current;
    audio.addEventListener('loadedmetadata', handleLoadedMetadata);
    audio.addEventListener('ended', handleEnded);
    
    return () => {
      audio.removeEventListener('loadedmetadata', handleLoadedMetadata);
      audio.removeEventListener('ended', handleEnded);
    };
  }, []);

  return (
    <div className="audio-player">
      <audio ref={audioRef} onTimeUpdate={handleTimeUpdate}>
        <source src={audio} type="audio/mp3" />
        Your browser does not support the audio tag.
      </audio>

      <div
        className="timeline"
        onClick={(e) => {
          if (!progressControl) {
            const audio = audioRef.current;
            const rect = e.target.getBoundingClientRect();
            const clickX = e.clientX - rect.left;
            const clickRatio = clickX / rect.width;
            audio.currentTime = audio.duration * clickRatio;
          }
        }}
      >
        <div className="progress" style={{ width: `${progress}%` }}></div>
      </div>

      <div className="controls">
        <div className="play-container" onClick={togglePlay}>
          <div className={`toggle-play ${isPlaying ? 'pause' : 'play'}`}></div>
        </div>
        <div className="time">
          <div className="current">{formatTime(currentTime)}</div>
          <div className="divider">/</div>
          <div className="length">{formatTime(duration)}</div>
        </div>
        <div className="name">{title}</div>
        <div className="volume-container">
          <div className="volume-button">
            <div className="volume icono-volumeMedium"></div>
          </div>
          <div className="volume-slider">
            <div className="volume-percentage"></div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default AudioPlayer;