import React, {
  useEffect,
  useRef,
  useState,
  useCallback,
  useContext,
} from "react";
import WaveSurfer from "wavesurfer.js";
import { FaPlayCircle, FaPauseCircle } from "react-icons/fa";
import useAudioPlayer from "../../../useAudioPlayer";
import AudioWaveComponent from "../../../useAudioPlayer/audioWave";

const WaveSurferPlayer = ({ size, streamSrc }) => {
  const { isPlaying, progress, play, pause } = useAudioPlayer({
    streamSrc,
  });
  // const containerRef = useRef();
  // const waveSurferRef = useRef();
  // const hlsRef = useRef();
  //  const waveSurferRef = useRef({
  //   isPlaying: () => false,
  // })
  // const [isPlaying, toggleIsPlaying] = useState(false);
  // const { accessToken } = useContext(OutletContext);
  // const account_id = getCookie("defaultAccountID");

  // useEffect(() => {
  //   if (!src) {
  //     hlsRef.current = new Hls({
  //       xhrSetup: function (xhr, url) {
  //         try {
  //           const modifiedURL = `${url}?_account=${account_id}`;
  //           xhr.open("GET", modifiedURL, true);
  //           xhr.setRequestHeader("Authorization", `Bearer ${accessToken}`);
  //         } catch (error) {
  //           console.error("XHR setup error:", error);
  //         }
  //       },
  //     });
  //   }

  //   waveSurferRef.current = WaveSurfer.create({
  //     // container: "#waves",
  //     container: containerRef.current,
  //     responsive: true,
  //     barWidth: 2,
  //     barHeight: 10,
  //     waveColor: "#fff",
  //     progressColor: "#fff",
  //     cursorWidth: 0,
  //     height: 30,
  //     barGap: 2,
  //     barRadius: 2,
  //     barMinHeight: 3,
  //   });
  //   // waveSurferRef.current.load(audio);
  //   // waveSurferRef.current.on("ready", (e) => {
  //   //   waveSurferRef.current = waveSurfer;

  //   //   console.log("wave", e);
  //   // });

  //   //stream test

  //   if (Hls?.isSupported() && !src) {
  //     hlsRef.current.attachMedia(waveSurferRef?.current?.media);
  //     hlsRef.current.loadSource(
  //       "https://dev-117782726-api.learngual.com" + audio
  //     );
  //     hlsRef.current.startLoad();
  //   } else {
  //     waveSurferRef.current.load(src);
  //   }

  //   waveSurferRef.current.on("finish", () => {
  //     toggleIsPlaying(false);
  //   });
  //   //stream test

  //   return () => {
  //     // waveSurferRef.current.destroy();
  //     if (hlsRef.current) {
  //       hlsRef.current.destroy();
  //     }
  //     if (waveSurferRef.current) {
  //       waveSurferRef.current.destroy();
  //     }
  //   };
  // }, [audio]);

  // const [waveSurfer, setWaveSurfer] = useState(null);

  //   useEffect(() => {
  //     // Initialize WaveSurfer
  //     const wavesurfer = WaveSurfer.create({
  //       container: '#waves', // The ID of the container element
  //       waveColor: 'violet',
  //       progressColor: 'purple'
  //     });
  //     setWaveSurfer(wavesurfer);

  //     // Cleanup on component unmount
  //     return () => wavesurfer.destroy();
  //   }, []);

  //   const loadAudio = async (audio) => {
  //     try {
  //       const response = await fetch(audio);
  //       const audioBlob = await response.blob();
  //       waveSurfer.loadBlob(audioBlob);
  //       console.log(response)
  //     } catch (error) {
  //       console.error('Error loading audio:', error);
  //     }
  //   };
  console.log("wave", isPlaying);

  return (
    <div style={{ display: "flex", alignItems: "center", height: "33px" }}>
      <button
        onClick={() => {
          
          // waveSurferRef.current.playPause();
          // toggleIsPlaying(waveSurferRef.current.isPlaying());
          // waveSurferRef.current.play();
          // loadAudio(audio)
          // toggleIsPlaying(waveSurferRef.current.isPlaying());
          // waveSurferRef.current.isPlaying()
          //   ? waveSurferRef.current.pause()
          //   : waveSurferRef.current.play();
        }}
        type="button"
        className="audio-btn"
      >
        {isPlaying ? (
          <FaPauseCircle
            size="20px"
            style={{ color: "#fff" }}
            onClick={pause}
          />
        ) : (
          <FaPlayCircle size="20px" style={{ color: "#fff" }} onClick={play} />
        )}
      </button>
      <div id="waves-bubble">
        <AudioWaveComponent
          type="small"
          count={14}
          playState={isPlaying ? "play" : "paused"}
        />
      </div>
    </div>
  );
};

export default WaveSurferPlayer;
