import { Haptics, ImpactStyle } from '@capacitor/haptics';
import util from "../util.js"

class AppMenu extends Shadow {
    selected = ""
    apps = global.currentNetwork.apps.filter(app => (app !== "Settings" && app !== "Website"))
    darkMode = window.matchMedia('(prefers-color-scheme: dark)').matches

    getImageURL(appName) {
        let imgUrl = `${util.HOST}/apps/${appName}/icons/${appName}`
        if(this.darkMode) {
            imgUrl += "light"
        }
        imgUrl += ".svg"
        imgUrl = imgUrl.toLowerCase()
        return imgUrl
    }

    onNewSelection() {
        this.$$("img").forEach((image) => {
            image.style.borderBottom = "1px solid transparent"
            const appName = image.attributes.app.value
            if (appName === global.currentApp()) {
                image.style.borderBottom = "1px solid var(--text)"
            }
            image.src = this.getImageURL(appName)
        })
    }

    render() {
        let apps = this.apps
        let appCount = apps.length
        let horizontalMargin = {
            1: 50,
            2: 10,
            3: 2,
            4: 1.5,
            5: 0.5
        }[appCount] ?? 4

        HStack(() => {

            for(let i = 0; i < apps.length; i++) {
                let app = apps[i]

                img(this.getImageURL(app), "1.3em")
                    .attr({app: app})
                    .padding(0.5, em)
                    .borderBottom(global.currentApp() === app ? "1px solid var(--text)" : "1px solid transparent")
                    .onTouch(async (done, e) => {
                        if(done) {
                            global.openApp(app)
                            this.onNewSelection()
                            await Haptics.impact({ style: ImpactStyle.Light });
                        }
                    })
            }
        })
        .display("grid")
        .gridTemplateColumns(`repeat(${apps.filter(app => app !== "Settings").length}, 1fr)`)
        .placeItems("center")
        .borderTop("0.5px solid var(--divider)")
        .height("auto")
        .zIndex(1)
        .paddingTop(0.5, em)
        .paddingBottom(2, em)
        .width(100, vw)
        .boxSizing("border-box")
    }
}

register(AppMenu)