const height = 100;

class Panel {
    constructor() {
        this.element = document.createElement("div");
        this.element.classList.add("panel")
        this.element.style.height = height + "px";

        this._createLeftPanel();
        this._createRightPanel();
        this._createCentralPanel();

        this._shuffle = null;

        this._time = null;

        this._updateInterval = setInterval(this._update.bind(this), 53);
    }
    destructor() {
        this.element.remove();
    }
    append(element) {
        element.style.position = "relative";
        element.style.paddingTop = height + "px";
        element.appendChild(this.element);
    }
    installShuffle(func) {
        this._shuffle = func;
    }
    startTimer() {
        this._time = Date.now();
    }
    _createLeftPanel() {
        this._leftPanel = document.createElement("div");
        this._leftPanel.style.position = "absolute";
        this._leftPanel.style.top = "0";
        this._leftPanel.style.left = "0";

        this._shuffleButton = document.createElement("div");
        this._shuffleButton.classList.add("button");
        this._shuffleButton.style.backgroundImage = "url(icons/refresh.svg)";
        this._shuffleButton.style.height = height + "px";
        this._shuffleButton.style.width = height + "px";
        this._shuffleButton.style.position = "absolute";
        this._shuffleButton.style.top = "0";
        this._shuffleButton.style.left = "0";
        this._shuffleButton.title = "Shuffle";
        this._shuffleButton.addEventListener("click", this._onShuffle.bind(this));

        this._leftPanel.appendChild(this._shuffleButton);

        this.element.style.paddingLeft = height + "px";
        this.element.appendChild(this._leftPanel);
    }
    _createRightPanel() {
        this._rightPanel = document.createElement("div");
        this._rightPanel.style.position = "absolute";
        this._rightPanel.style.top = "0";
        this._rightPanel.style.right = "0";
        this.element.appendChild(this._rightPanel);
    }
    _createCentralPanel() {
        this._centralPanel = document.createElement("div");
        this._centralPanel.classList.add("fs", "cp");
        this._centralPanel.style.display = "flex";
        this._centralPanel.style.alignItems = "center";
        this._centralPanel.style.justifyContent = "center";

        this._ms = document.createElement("span");
        this._mds = document.createElement("span");
        this._ss = document.createElement("span");
        this._sdmin = document.createElement("span");
        this._mins = document.createElement("span");

        this._ms.innerText = "000";
        this._mds.innerText = ":";
        this._ss.innerText = "00";
        this._sdmin.innerText = ":";
        this._mins.innerText = "00";

        this._centralPanel.appendChild(this._mins);
        this._centralPanel.appendChild(this._sdmin);
        this._centralPanel.appendChild(this._ss);
        this._centralPanel.appendChild(this._mds);
        this._centralPanel.appendChild(this._ms);

        this.element.appendChild(this._centralPanel);
    }
    _update() {
        if (this._time !== null) {
            let time = Date.now() - this._time;
            let minutes = Math.floor(time / (1000 * 60));
            time = time % (1000 * 60);
            let seconds = Math.floor(time / 1000);
            time = time % 1000;

            this._mins.innerText = pad(minutes, 2);
            this._ss.innerText = pad(seconds, 2);
            this._ms.innerText = pad(time, 3);
        }
    }
    _onShuffle() {
        if (this._shuffle !== null) {
            this._shuffle();
        }
    }
}

function pad (num, amount) {
    let p = pads[amount];
    let sNum = num.toString();
    let pref = p[sNum.length];
    return pref + sNum;
}

const pads = [
    [""],
    ["0", ""],
    ["00", "0", ""],
    ["000", "00", "0", ""]
]

export default Panel;