const prevButton = document.getElementById("prev");
const nextButton = document.getElementById("next");
const repeatButton = document.getElementById("repeat");
const shuffleButton = document.getElementById("shuffle");
const audio = document.getElementById("audio");
const songImage = document.getElementById("song-image");
const songName = document.getElementById("song-name");
const songArtist = document.getElementById("song-artist");
const playButton = document.getElementById("play");
const pauseButton = document.getElementById("pause");
const playListButton = document.getElementById("playlist");

const maxDuration = document.getElementById("max-duration");
const currentTimeRef = document.getElementById("current-time");

const progressBar = document.getElementById("progress-bar");
const playListContainer = document.getElementById("playlist-container");
const closeButton = document.getElementById("close-button");
const playListSongs = document.getElementById("playlist-songs");

const currentProgress = document.getElementById("current-progress");

// sıra
let index;

// döngü
let loop = true;

// liste
const songsList = [
  {
    name: "Aramam",
    link: "assets/aramam.mp3",
    artist: "ibrahim tatlıses",
    image: "assets/ibrahim-tatlises.jpeg",
  },
  {
    name: "Dinle",
    link: "assets/dinle.mp3",
    artist: "Mahsun Kırmızıgül",
    image: "assets/mahsun.jpeg",
  },
  {
    name: "Ax Eman",
    link: "assets/ax-eman.mp3",
    artist: "Rewsan Celiker",
    image: "assets/rewsan-celiker.jpeg",
  },
  {
    name: "Gelo Ew Ki Bu",
    link: "assets/gelo-ew-ki-bu.mp3",
    artist: "Aram Tigran",
    image: "assets/aram-tigran.jpeg",
  },
  {
    name: "Gitme Kal",
    link: "assets/yara-bere-icindeyim.mp3",
    artist: "Hira-i Zerdust",
    image: "assets/hirai.jpeg",
  },
];

// şarkı atama
const setSong = (arrayIndex) => {
  console.log(arrayIndex);
  let { name, link, artist, image } = songsList[arrayIndex];
  audio.src = link;
  songName.innerHTML = name;
  songArtist.innerHTML = artist;
  songImage.src = image;

  // sureyi ayarla
  audio.onloadedmetadata = () => {
    maxDuration.innerText = timeFormatter(audio.duration);
  }
  playListContainer.classList.add('hide')
  playAudio( )
}

// zamanı istenilen formatta düzenleme
const timeFormatter = (timeIput) => {
  let minute = Math.floor(timeIput / 60);
  minute = minute < 10 ? "0" + minute : minute;
  let second = Math.floor(timeIput % 60); // saniyeyi bulmak için timeIput un 60 ile bölümünden kalanı hesaplıyoruz.
  second = second < 10 ? "0" + second : second;
  return `${minute}:${second}`;
};

// Şarkıyı çal
const playAudio = () => {
  audio.play();
  pauseButton.classList.remove("hide");
  playButton.classList.add("hide");
};

const pauseAudio = () => {
  audio.pause();
  playButton.classList.remove("hide");
  pauseButton.classList.add("hide");
};

// Sonraki Şarkıya Git
const nextSong = () => {
  if (loop) {
    if (index == songsList.length - 1) {
      index = 0;
    } else {
      index += 1;
    }
  } else {
    // rastgele sıra oluştur.
    let randIndex = Math.floor(Math.random() * songsList.length);
    index = randIndex;
  }

  setSong(index);
  playAudio();
};

// Önceki şarkıya git
const previousSong = () => {
  pauseAudio();

  if (index > 0) {
    index -= 1;
  } else {
    index = songsList.length - 1;
  }

  setSong(index);
  playAudio();
};

// Play butonuna tıklanıldığında
playButton.addEventListener("click", playAudio);

// Durdur butonuna tıklanıldığında
pauseButton.addEventListener("click", pauseAudio);

// Sonraki şarkıya geç butonuna tıklanıldığında
nextButton.addEventListener("click", nextSong);

// Önceki şarkıya geç butonuna tıklanıldığında
prevButton.addEventListener("click", previousSong);

// Karıştırma butonuna tıklanıldığında
shuffleButton.addEventListener("click", () => {
  if (shuffleButton.classList.contains("active")) {
    shuffleButton.classList.remove("active");
    loop = true;
  } else {
    shuffleButton.classList.add("active");
    loop = false;
  }
});

// tekrar et butonuna tıklanıldığında
repeatButton.addEventListener("click", () => {
  if (repeatButton.classList.contains("active")) {
    repeatButton.classList.remove("active");
    loop = false;
  } else {
    repeatButton.classList.add("active");
    loop = true;
  }
});

// progres bar 'a tıklanıldığında (gri alan)
progressBar.addEventListener("click", (event) => {
  // başlangıç  / sol
  let cordStart = progressBar.getBoundingClientRect().left;
  console.log("coordStart " + cordStart);

  // bitiş
  let coordEnd = event.clientX
  console.log("coordEnd " + coordEnd);
  console.log("progressBar.offsetWidth " + progressBar.offsetWidth)

  // Kullanıcın tıkladığı yer progress barın yüzde kaçına denk geliyor
  let progress = (coordEnd - cordStart) / progressBar.offsetWidth
  //currentProgress 'in with 'ine progress değerinin 100 ile çarpıp veriyoruz. Çünkü ondalık bir sayı çıkıyor.   
  currentProgress.style.width = progress * 100 + "%"

  // Zamanı Güncelle
  audio.currentTime = progress  * audio.duration // 300
  audio.play()
  pauseButton.classList.remove('hide')
  playButton.classList.add('hide') 


});

// liste açma butonuna tıklanıldığında
playListButton.addEventListener('click', ()=>{
  playListContainer.classList.remove('hide')
});

// Müzik listesini kapat butonuna (x) tıklanıldığında
closeButton.addEventListener('click', ()=>{
  playListContainer.classList.add('hide')
})


  // Ekran yüklenince
  setInterval(() => {
    // timeFormatter fonksiyonu ile gelen süreyi HTML tag 'ine aktarıyor.
    currentTimeRef.innerHTML =  timeFormatter(audio.currentTime)
    // şarkı çaldıkça progres barı uzunluğunu css olarak  güncelliyor.
    currentProgress.style.width = (audio.currentTime / audio.duration.toFixed(3) * 100 + "%" )
     
  }, 1000);

  // Zaman güncellendiğinde
  audio.addEventListener('timeupdate', () =>{
    currentTimeRef.innerText = timeFormatter(audio.currentTime)

  })


  // Sonraki şarkıya geç
  // şarkı veya ses dosyası bittiğinde  
   audio.onended = () => {
      nextSong()
   }

   // Oynatma Listesi Oluştur   
   const initializePlayList = () => { 
      for (let i in songsList) {
        playListSongs.innerHTML += `<li class ="playListSong" onclick="setSong(${i})">
          <div class="playlist-image-container">
            <img src="${songsList[i].image}" />
          </div>
          <div class="playlist-song-details">   
              <span id="playlist-song-name"> 
              ${songsList[i].name}
              </span>
              <span id="playlist-song-artis-album"> 
              ${songsList[i].artist}
              </span>
            
          </div>  

        </li>`
      }

   }

// Ekran yüklediğinde
window.onload = () => {
  index = 0;
  setSong(index);
  pauseAudio();
  initializePlayList()
};