let indexSong = 0;
let isLocked = false;
let songsLength = null;
let selectedSong = null;
let loadingProgress = 0;
let songIsPlayed = false;
let progress_elmnt = null;
let songName_elmnt = null;
let sliderImgs_elmnt = null;
let singerName_elmnt = null;
let progressBar_elmnt = null;
let playlistSongs_elmnt = [];
let loadingProgress_elmnt = null;
let musicPlayerInfo_elmnt = null;
let progressBarIsUpdating = false;
let broadcastGuarantor_elmnt = null;
const root = document.querySelector("#root");

function App({ songs }) {
    function handleChangeMusic({ isPrev = false, playListIndex = null }) {
        if (isLocked || indexSong === playListIndex) return;

        if (playListIndex || playListIndex === 0) {
            indexSong = playListIndex;
        } else {
            indexSong = isPrev ? (indexSong -= 1) : (indexSong += 1);
        }

        if (indexSong < 0) {
            indexSong = 0;
            return;
        } else if (indexSong > songsLength) {
            indexSong = songsLength;
            return;
        }

        selectedSong.pause();
        selectedSong.currentTime = 0;
        progressBarIsUpdating = false;
        selectedSong = playlistSongs_elmnt[indexSong];
        selectedSong.paused && songIsPlayed ? selectedSong.play() : selectedSong.pause();

        setBodyBg(songs[indexSong].bg);
        setProperty(sliderImgs_elmnt, "--index", -indexSong);
        updateInfo(singerName_elmnt, songs[indexSong].artist);
        updateInfo(songName_elmnt, songs[indexSong].songName);
    }

    setBodyBg(songs[0].bg);

    const appElement = document.createElement('div');
    appElement.className = 'music-player flex-column';
    appElement.appendChild(Slider({ slides: songs, handleChangeMusic }));
    appElement.appendChild(Playlist({ list: songs, handleChangeMusic }));

    return appElement;
}

function Slider({ slides, handleChangeMusic }) {
    function handleResizeSlider({ target }) {
        if (isLocked) {
            return;
        } else if (target.classList.contains("music-player__info")) {
            this.classList.add("resize");
            setProperty(this, "--controls-animate", "down running");
            return;
        } else if (target.classList.contains("music-player__playlist-button")) {
            this.classList.remove("resize");
            setProperty(this, "--controls-animate", "up running");
            return;
        }
    }
    function handlePlayMusic() {
        if (selectedSong.currentTime === selectedSong.duration) {
            handleChangeMusic({});
        }

        this.classList.toggle("click");
        songIsPlayed = !songIsPlayed;
        selectedSong.paused ? selectedSong.play() : selectedSong.pause();
    }

    const sliderElement = document.createElement('div');
    sliderElement.className = 'slider center';
    sliderElement.onclick = handleResizeSlider;

    const sliderContent = document.createElement('div');
    sliderContent.className = 'slider__content center';

    const playlistButton = document.createElement('button');
    playlistButton.className = 'music-player__playlist-button center button';
    const playlistIcon = document.createElement('i');
    playlistIcon.className = 'icon-playlist';
    playlistButton.appendChild(playlistIcon);

    const playButton = document.createElement('button');
    playButton.onclick = handlePlayMusic;
    playButton.className = 'music-player__broadcast-guarantor center button';
    const playIcon = document.createElement('i');
    playIcon.className = 'icon-play';
    const pauseIcon = document.createElement('i');
    pauseIcon.className = 'icon-pause';
    playButton.appendChild(playIcon);
    playButton.appendChild(pauseIcon);

    const sliderImgs = document.createElement('div');
    sliderImgs.className = 'slider__imgs flex-row';
    slides.forEach(({ songName, files: { cover } }) => {
        const img = document.createElement('img');
        img.src = cover;
        img.className = 'img';
        img.alt = songName;
        sliderImgs.appendChild(img);
    });

    sliderContent.appendChild(playlistButton);
    sliderContent.appendChild(playButton);
    sliderContent.appendChild(sliderImgs);
    sliderElement.appendChild(sliderContent);

    const sliderControls = document.createElement('div');
    sliderControls.className = 'slider__controls center';

    const backButton = document.createElement('button');
    backButton.className = 'slider__switch-button flex-row button';
    backButton.onclick = () => handleChangeMusic({ isPrev: true });
    const backIcon = document.createElement('i');
    backIcon.className = 'icon-back';
    backButton.appendChild(backIcon);

    const musicInfo = document.createElement('div');
    musicInfo.className = 'music-player__info text_trsf-cap';
    const singerName = document.createElement('div');
    singerName.className = 'music-player__singer-name';
    const singerNameText = document.createElement('div');
    singerNameText.textContent = slides[0].artist;
    singerName.appendChild(singerNameText);
    musicInfo.appendChild(singerName);
    const songTitle = document.createElement('div');
    songTitle.className = 'music-player__subtitle';
    const songTitleText = document.createElement('div');
    songTitleText.textContent = slides[0].songName;
    songTitle.appendChild(songTitleText);
    musicInfo.appendChild(songTitle);

    const nextButton = document.createElement('button');
    nextButton.className = 'slider__switch-button flex-row button';
    nextButton.onclick = () => handleChangeMusic({ isPrev: false });
    const nextIcon = document.createElement('i');
    nextIcon.className = 'icon-next';
    nextButton.appendChild(nextIcon);

    const progressContainer = document.createElement('div');
    progressContainer.className = 'progress center';
    progressContainer.onpointerdown = (e) => {
        handleScrub(e);
        progressBarIsUpdating = true;
    };

    const progressWrapper = document.createElement('div');
    progressWrapper.className = 'progress__wrapper';
    const progressBar = document.createElement('div');
    progressBar.className = 'progress__bar center';
    progressWrapper.appendChild(progressBar);
    progressContainer.appendChild(progressWrapper);

    sliderControls.appendChild(backButton);
    sliderControls.appendChild(musicInfo);
    sliderControls.appendChild(nextButton);
    sliderControls.appendChild(progressContainer);

    sliderElement.appendChild(sliderControls);

    return sliderElement;
}

function Playlist({ list, handleChangeMusic }) {
    function loadedAudio() {
        const duration = this.duration;
        const target = this.parentElement.querySelector(".music-player__song-duration");

        let min = parseInt(duration / 60);
        if (min < 10) min = "0" + min;

        let sec = parseInt(duration % 60);
        if (sec < 10) sec = "0" + sec;

        target.appendChild(document.createTextNode(`${min}:${sec}`));
    }

    function updateTheProgressBar() {
        const duration = this.duration;
        const currentTime = this.currentTime;

        const progressBarWidth = (currentTime / duration) * 100;
        setProperty(progressBar_elmnt, "--width", `${progressBarWidth}%`);

        if (songIsPlayed && currentTime === duration) {
            handleChangeMusic({});
        }

        if (indexSong === songsLength && this === selectedSong && currentTime === duration) {
            songIsPlayed = false;
            broadcastGuarantor_elmnt.classList.remove("click");
        }
    }

    const playlistElement = document.createElement('ul');
    playlistElement.className = 'music-player__playlist list';

    list.forEach(({ songName, artist, files: { cover, song } }, index) => {
        const li = document.createElement('li');
        li.className = 'music-player__song';
        li.onclick = () => handleChangeMusic({ isPrev: false, playListIndex: index });

        const songInfo = document.createElement('div');
        songInfo.className = 'flex-row _align_center';

        const img = document.createElement('img');
        img.src = cover;
        img.className = 'img music-player__song-img';

        const playlistInfo = document.createElement('div');
        playlistInfo.className = 'music-player__playlist-info text_trsf-cap';
        const songNameElement = document.createElement('b');
        songNameElement.className = 'text_overflow';
        songNameElement.textContent = songName;
        playlistInfo.appendChild(songNameElement);

        const songDetails = document.createElement('div');
        songDetails.className = 'flex-row _justify_space-btwn';
        const artistElement = document.createElement('span');
        artistElement.className = 'music-player__subtitle';
        artistElement.textContent = artist;
        const songDuration = document.createElement('span');
        songDuration.className = 'music-player__song-duration';
        songDetails.appendChild(artistElement);
        songDetails.appendChild(songDuration);
        playlistInfo.appendChild(songDetails);

        songInfo.appendChild(img);
        songInfo.appendChild(playlistInfo);
        li.appendChild(songInfo);

        const audio = document.createElement('audio');
        audio.src = song;
        audio.onloadeddata = loadedAudio;
        audio.ontimeupdate = updateTheProgressBar;
        li.appendChild(audio);

        playlistElement.appendChild(li);
    });

    return playlistElement;
}

function Loading() {
    const loadingElement = document.createElement('div');
    loadingElement.className = 'loading flex-row';
    const progressSpan = document.createElement('span');
    progressSpan.className = 'loading__progress';
    progressSpan.textContent = '0';
    loadingElement.appendChild(progressSpan);
    loadingElement.appendChild(document.createTextNode('%'));

    return loadingElement;
}

fetch("https://gist.githubusercontent.com/abxlfazl/37404417d17230a629683eb3f2f0a88a/raw/366ad64df645e94592847283a306fe2276de458e/music-info.json")
    .then((respone) => respone.json())
    .then((result) => {
        const songs = result.songs;

        function downloadTheFiles(media, input) {
            return Promise.all(
                input.map((song) => {
                    const promise = new Promise((resolve) => {
                        const url = song.files[media];
                        const req = new XMLHttpRequest();
                        req.open("GET", url, true);
                        req.responseType = "blob";
                        req.send();
                        req.onreadystatechange = () => {
                            if (req.readyState === 4) {
                                if (req.status === 200) {
                                    const blob = req.response;
                                    const file = URL.createObjectURL(blob);
                                    song.files[media] = file;
                                    resolve(song);
                                }
                            }
                        };
                    });

                    promise.then(() => {
                        loadingProgress++;
                        const progress = Math.round(
                            (loadingProgress / (songs.length * 2)) * 100
                        );
                        loadingProgress_elmnt.innerHTML = progress;
                    });

                    return promise;
                })
            );
        }

        root.appendChild(Loading());
        loadingProgress_elmnt = document.querySelector(".loading__progress");

        downloadTheFiles("cover", songs).then((respone) => {
            downloadTheFiles("song", respone).then((data) => {
                root.removeChild(document.querySelector(".loading"));
                root.appendChild(App({ songs: data }));

                songsLength = data.length - 1;
                progress_elmnt = document.querySelector(".progress");
                playlistSongs_elmnt = document.querySelectorAll("audio");
                sliderImgs_elmnt = document.querySelector(".slider__imgs");
                songName_elmnt = document.querySelector(".music-player__subtitle");
                musicPlayerInfo_elmnt = document.querySelector(".music-player__info");
                singerName_elmnt = document.querySelector(".music-player__singer-name");
                selectedSong = playlistSongs_elmnt[indexSong];
                progressBar_elmnt = document.querySelector(".progress__bar");
                broadcastGuarantor_elmnt = document.querySelector(
                    ".music-player__broadcast-guarantor"
                );

                controlSubtitleAnimation(musicPlayerInfo_elmnt, songName_elmnt);
                controlSubtitleAnimation(musicPlayerInfo_elmnt, singerName_elmnt);
            });
        });
    });

function controlSubtitleAnimation(parent, child) {
    if (child.classList.contains("animate")) return;

    const element = child.firstChild;

    if (child.clientWidth > parent.clientWidth) {
        child.appendChild(element.cloneNode(true));
        child.classList.add("animate");
    }

    setProperty(child.parentElement, "width", `${element.clientWidth}px`);
}

function handleResize() {
    const vH = window.innerHeight * 0.01;
    setProperty(document.documentElement, "--vH", `${vH}px`);
}

function setProperty(target, prop, value = "") {
    target.style.setProperty(prop, value);
}

function setBodyBg(color) {
    setProperty(document.body, "--body-bg", color);
}

function updateInfo(target, value) {
    while (target.firstChild) {
        target.removeChild(target.firstChild);
    }

    const targetChild_elmnt = document.createElement("div");
    targetChild_elmnt.appendChild(document.createTextNode(value));
    target.appendChild(targetChild_elmnt);
    target.classList.remove("animate");
    controlSubtitleAnimation(musicPlayerInfo_elmnt, target);
}

function handleScrub(e) {
    const progressOffsetLeft = progress_elmnt.getBoundingClientRect().left;
    const progressWidth = progress_elmnt.offsetWidth;
    const duration = selectedSong.duration;
    const currentTime = (e.clientX - progressOffsetLeft) / progressWidth;

    selectedSong.currentTime = currentTime * duration;
}

handleResize();

window.addEventListener("resize", handleResize);
window.addEventListener("orientationchange", handleResize);
window.addEventListener("transitionstart", ({ target }) => {
    if (target === sliderImgs_elmnt) {
        isLocked = true;
        setProperty(sliderImgs_elmnt, "will-change", "transform");
    }
});
window.addEventListener("transitionend", ({ target, propertyName }) => {
    if (target === sliderImgs_elmnt) {
        isLocked = false;
        setProperty(sliderImgs_elmnt, "will-change", "auto");
    }
    if (target.classList.contains("slider") && propertyName === "height") {
        controlSubtitleAnimation(musicPlayerInfo_elmnt, songName_elmnt);
        controlSubtitleAnimation(musicPlayerInfo_elmnt, singerName_elmnt);
    }
});
window.addEventListener("pointerup", () => {
    if (progressBarIsUpdating) {
        selectedSong.muted = false;
        progressBarIsUpdating = false;
    }
});
window.addEventListener("pointermove", (e) => {
    if (progressBarIsUpdating) {
        handleScrub(e);
        selectedSong.muted = true;
    }
});