import { DeckButton } from './deck-button.js';

const urlParams = new URLSearchParams(window.location.search);
const currentSide = urlParams.get("side");
const Cassette = new Audio(`audio/2019-mix-side-${currentSide}.mp3`);
const ffSound = new Audio("audio/ff.mp3");

let TapeDeck = {
    elem: document.getElementById("tape-deck"),
    notes: document.getElementById("notes"),
    trackData: [],
    currentTrackIndex: 0,
    hasStarted: false,
    isPlaying: false,
    images: { stop: "images/cool-deck.png", go: "images/cool-deck.gif" },
    initSound: new Audio("audio/tape-start.mp3"),
    playButton: DeckButton("play"),
    ffButton: DeckButton("ff"),
    rewindButton: DeckButton("rewind"),
    go: function () {
        this.elem.src = this.images.go;
        this.isPlaying = true;
    },
    start: function () {
        this.hasStarted = true;
        this.initSound.onended = (event) => { Cassette.play(); };
        this.initSound.play();
        this.go();
    },
    pause: function () {
        this.playButton.toggle();
        Cassette.pause();
        this.elem.src = this.images.stop;
        this.isPlaying = false;
    },
    resume: function () {
        this.go();
        Cassette.play();
    },
    disableButtons: function() {
        this.playButton.disable();
        this.ffButton.disable();
        this.rewindButton.disable();
    },
    enableButtons: function() {
        this.playButton.enable();
        this.ffButton.enable();
        this.rewindButton.enable();
    }
};

ffSound.onended = (event) => {
    if (TapeDeck.ffButton.state() === "on") {
        TapeDeck.ffButton.toggle();
    } else {
        TapeDeck.rewindButton.toggle();
    }
    TapeDeck.enableButtons();
    TapeDeck.resume();
    TapeDeck.playButton.toggle({sound: false});
};

// button onclick points here
window.play = function () {
    if (TapeDeck.isPlaying) { TapeDeck.pause(); return; }
    // figure out better way of handling play button
    TapeDeck.playButton.toggle();
    TapeDeck.hasStarted ? TapeDeck.resume() : TapeDeck.start();
}

window.ff = function () {
    if (TapeDeck.isPlaying) TapeDeck.pause();
    TapeDeck.disableButtons();
    TapeDeck.ffButton.toggle();
    Cassette.currentTime = Cassette.currentTime + 20;
    ffSound.play();
}

window.rewind = function () {
    if (TapeDeck.isPlaying) TapeDeck.pause();
    TapeDeck.disableButtons();
    TapeDeck.rewindButton.toggle();
    Cassette.currentTime = Cassette.currentTime - 20;
    ffSound.play();
}

window.reset = function () {
    Cassette.currentTime = 0;
}

function isLastTrack(current, tracks) {
    return current + 1 === tracks.length;
}

function getTrack(time) {
    const { currentTrackIndex, trackData } = TapeDeck;
    const nextIndex = currentTrackIndex + 1;
    const startTimes = trackData.map( t => t.start );

    if (isLastTrack(currentTrackIndex, startTimes)) {
        return trackData[trackData.length - 1];
    } else {
        if (time >= startTimes[nextIndex]) {
            TapeDeck.currentTrackIndex = nextIndex;
        }

        return trackData[currentTrackIndex];
    }
}

function formatTrackData(track) {
    let string = `${track.title} - ${track.artist}`;
    if (track.album) {
        string = string.concat(` - ${track.album}`);
    }

    if (track.link) {
        string = string.concat(` - ${track.link}`);
    }

    return string;
}

function loadTrackData() {
    fetch(`side${currentSide}.json`)
        .then(response => response.json())
        .then((data) => {
            TapeDeck.trackData = data;
        });
}

function resumeMaybe() {
    if (localStorage.getItem(currentSide)) {
        Cassette.currentTime = localStorage.getItem(currentSide);
    }
}

loadTrackData();

resumeMaybe();

Cassette.addEventListener("timeupdate", (event) => {
    const time = Cassette.currentTime;
    const currentTrack = getTrack(time);

    localStorage.setItem(currentSide, time);

    if (!currentTrack) return;

    TapeDeck.notes.textContent = formatTrackData(currentTrack);
});