css(`
    bottombar- {
        pointer-events: none;
    }
    bottombar- select {
        -webkit-appearance: none;
        text-align-last: center;
        -webkit-text-align-last: center;
    }
`)

class BottomBar extends Shadow {
    baseUrl = `${config.UI}/apps/calendar/icons`

    constructor(callbacks = {}) {
        super()
        this.onAddEvent = callbacks.onAddEvent;
        this.onCalendarOptions = callbacks.onCalendarOptions;
        this.onChangeView = callbacks.onChangeView;
        this.viewMode = callbacks.viewMode;
        this.hideViewSelect = callbacks.hideViewSelect ?? false;
    }

    getImageURL(iconName) {
        let imgUrl = `${this.baseUrl}/${iconName}`
        if(util.darkMode()) {
            imgUrl += "light"
        }
        imgUrl += ".svg"
        imgUrl = imgUrl.toLowerCase()
        return imgUrl
    }

    render() {
        HStack(() => {
            // Left: view mode select
            if (!this.hideViewSelect) select(() => {
                ["day", "week", "month"].forEach(mode => {
                    const o = option(mode.charAt(0).toUpperCase() + mode.slice(1))
                        .attr({ value: mode })
                    if (mode === this.viewMode) o.attr({ selected: true })
                })
            })
            .fontSize(1, em)
            .paddingVertical(0.6, em)
            .paddingHorizontal(0.75, em)
            .background("var(--button-color)")
            .backdropFilter("blur(10px)")
            .borderRadius(100, px)
            .pointerEvents("auto")
            .border(`.5px solid ${util.darkMode() ? "var(--accent)" : "transparent"}`)
            .color(util.darkMode() ? "var(--text)" : "white")
            .onTouch(function (start) {
                if(start) {
                    this.background("var(--main)")
                } else {
                    this.background("var(--button-color)")
                }
            })
            .fontFamily("Arial")
            .outline("none")
            .appearance("none")
            .textAlign("center")
            .onChange(e => this.onChangeView(e.target.value))

            // Right: add event + calendar options
            HStack(() => {
                const addEventImg = img(this.getImageURL("addevent"), "1em", "1em")
                    .paddingVertical(0.75, em).paddingHorizontal(1, em)
                    .onTap(async () => {
                        this.onAddEvent()
                        addEventImg.src = `${this.baseUrl}/addeventlightselected.svg`
                        const sheet = $("bottomsheet-")
                        const revert = () => {
                            if (!sheet.isOpen) {
                                addEventImg.src = this.getImageURL("addevent")
                                sheet.sheetEl.removeEventListener("transitionend", revert)
                            }
                        }
                        sheet.sheetEl.addEventListener("transitionend", revert)
                    })

                const calendarSheetImg = img(this.getImageURL("calbutton"), "1.1em")
                    .paddingVertical(0.75, em).paddingHorizontal(1, em)
                    .onTap(async () => {
                        this.onCalendarOptions()
                        calendarSheetImg.src = `${this.baseUrl}/calbuttonlightselected.svg`
                        const sheet = $("bottomsheet-")
                        const revert = () => {
                            if (!sheet.isOpen) {
                                calendarSheetImg.src = this.getImageURL("calbutton")
                                sheet.sheetEl.removeEventListener("transitionend", revert)
                            }
                        }
                        sheet.sheetEl.addEventListener("transitionend", revert)
                    })
            })
            .background("var(--button-color)")
            .pointerEvents("auto")
            .onTouch(function (start) {
                if(start) {
                    this.background("var(--main)")
                } else {
                    this.background("var(--button-color)")
                }
            })
            .backdropFilter("blur(10px)")
            .alignItems("center")
            .flexShrink(0)
            .borderRadius(100, px)
            .border(`0.5px solid ${util.darkMode() ? "var(--accent)" : "transparent"}`)
            .overflow("hidden")
        })
        .position("absolute")
        .left(4, vw)
        .bottom(0.75, em)
        .zIndex(2)
        .justifyContent(this.hideViewSelect ? "flex-end" : "space-between")
        .width(92, vw)
        .onEvent("themechange", () => {
            this.rerender()
        })
    }
}

register(BottomBar)