const app = window.app ??= {}
const view = window.view ??= {}

import * as browser from './browser.js'
import * as player from './player.js'
import * as queue from './queue.js'
import * as input from './input.js'

export let modules
export const states = {
    PLAYER: 0,
    BROWSER: 1,
    QUEUE: 2
}

export const Init = (name) => {
    app.mode = 1
}

export const View = () => {
    view.tabIndicatorLine = document.getElementById('tab-indicator-line')

    modules = new Array(3)
    modules[states.PLAYER] = player
    modules[states.BROWSER] = browser
    modules[states.QUEUE] = queue

    modules[app.mode].Open()
    
    Render()
    input.Actions()
}

export const Display = (name) => {
    document.body.classList = [ name ]
}

export const Render = () => {
    updateIndicator()
}

export const indicatorMargin = 2
export const updateIndicator = () => {
    let dashes = []
    let r = 100 - (indicatorMargin * (modules.length - 1))
    let pd = 60
    let sdc = modules.length - 1
    let sdr = r - pd
    let sd = parseInt(sdr / sdc)
    pd += sdr % sdc

    for(let i = 0; i < modules.length; i++) {
        dashes.push(i === app.mode ? pd : sd)
    }

    view.tabIndicatorLine.style.strokeDasharray = dashes
        .join(', ' + indicatorMargin + ', ')

}

export const Set = (iMode) => {
    app.mode = iMode
    View()
}

export const Scroll = (distance) => {
    let i = distance + app.mode
    if(i < 0) i = modules.length - 1
    else if(i >= modules.length) i = 0 
    Set(i)
}

export const OnKeydown = (event) => {
    return modules[app.mode].OnKeydown(event)
}