import React, { useState, useEffect } from "react";
import Library from "./Library";
import { connect } from "react-redux";
import Playlist from "../components/Playlist";

import "../styles/player.css";
import { setCurrentTrack } from "../actions/playerActions";

// this.props.playlist
const Player = ({
  playlist = [],
  track,
  currentTrack,
  setCurrentTrack,
  turl,
  pressedTracks = [],
}) => {
  console.log("currentTrack in Player: ", currentTrack);
  console.log("playlist in Player: ", playlist);
  console.log("track in Player: ", track);
  console.log("pressedTracks in Player: ", pressedTracks);

  const [isAutoplayed, setIsAutoplayed] = useState(true);
  const [isLoopTrack, setIsLoopTrack] = useState(false);
  // const [trackRate, setTrackRate] = useState(1.0);
  const [isMixOrder, setIsmixOrder] = useState(false);

  // const [currentPlaylist, setCurrentPlaylist] = useState([]);

  // useEffect(() => {
  //   if (!playlist) {
  //     setCurrentPlaylist(pressedTracks);
  //     console.log(pressedTracks)
  //   } else {
  //     setCurrentPlaylist(playlist);
  //   }
  // }, [pressedTracks, playlist]);

  function goPrevTrack() {
    setIsAutoplayed(true);
    (currentTrack > 0 && setCurrentTrack(currentTrack - 1)) ||
      (playlist && currentTrack == 0 && setCurrentTrack(playlist.length - 1)) ||
      (pressedTracks &&
        currentTrack == 0 &&
        setCurrentTrack(pressedTracks.length - 1));
  }
  function goNextTrack() {
    setIsAutoplayed(true);
    (currentTrack < playlist.length - 1 && setCurrentTrack(currentTrack + 1)) ||
      (currentTrack == playlist.length - 1 && setCurrentTrack(0));
    (currentTrack < pressedTracks.length - 1 &&
      setCurrentTrack(currentTrack + 1)) ||
      (currentTrack == pressedTracks.length - 1 && setCurrentTrack(0));
  }

  // function goLoopTrack() {
  //   // !setIsLoopTrack;
  //   setIsLoopTrack(true);
  //   // background={isLoopTrack? blue : null}
  // }

  // useEffect(() => {
  //   var audio = document.getElementsByTagName(audio);
  //   console.log(audio)
  //   // audio.src =
  //   //   (playlist[currentTrack] && playlist[currentTrack].url) ||
  //   //   (pressedTracks[currentTrack] && pressedTracks[currentTrack].url) ||
  //   //   "";
  //   // audio.addEventListener("loadedmetadata", function () {
  //   //   // обработчик для получения метаинфы о треке
  //   //   console.log(audio.duration); // выводим на экран интересующее свйство объекта audio
  //   //   // audio.play();  // для примера делаем старт трека
  //   // });
  // }, []);

  // function changeRate(){
  //   setTrackRate(trackRate + 0.5)
  // }

  return (
    <div className="player">
      {/* {console.log(playlist[currentTrack])} */}
      <button className="prevTrack" onClick={() => goPrevTrack()}>
        prev
      </button>
      <audio
        controls
        src={
          (playlist[currentTrack] && playlist[currentTrack].url) ||
          (pressedTracks[currentTrack] && pressedTracks[currentTrack].url) ||
          ""
        }
        loop={isLoopTrack}
        onEnded={() => goNextTrack()}
        autoPlay={isAutoplayed}
        // onRateChange={changeRate}
        // defaultPlaybackRate={0.5}
        // playbackrate={trackRate}
        playbackrate = {0.3}
        // playbackRate={trackRate}
        // playbackRate={2}
        // duration = {
        //   // setTrackDuration(trackDuration)
        // }
      />
      <button className="nextTrack" onClick={() => goNextTrack()}>
        next
      </button>
      <button
        // className={`"loopTrack" + " " + ${isLoopTrack? "active" : null}`}
        className="loopTrack"
        onClick={() => {
          let btn = document.querySelector(".loopTrack");
          setIsLoopTrack(!isLoopTrack);
          !isLoopTrack
            ? btn.classList.add("loopTrackClick")
            : btn.classList.remove("loopTrackClick");
        }}
      >
        loop
      </button>
      {/* <button className="prevTrack"
      onClick ={() => 
        // setTrackRate(trackRate + 0.5)
        changeRate()
      }
      >Rate+{trackRate}</button> */}

      <button className="prevTrack" onClick={() => setIsmixOrder(!isMixOrder)}>
        Mix
      </button>
    </div>
  );
};

const mapStateToProps = (state) => ({
  currentTrack: state.player.currentTrack,
  // currentTrack: state.playlistTrackReducer. ...,
  // currentTrack: state.playlistTrackReducer,
});

const mapDispatchToProps = (dispatch) => ({
  setCurrentTrack: (trackIndex) => dispatch(setCurrentTrack(trackIndex)),
});

export default connect(mapStateToProps, mapDispatchToProps)(Player);
