class DesktopToolbar extends Shadow {
    constructor(currentDate, actions) {
        super()
        this.currentDate = currentDate
        this.actions = actions
    }

    render() {
        const { goToPrevious, goToCurrent, goToNext } = this.actions

        HStack(() => {
            h2(this.currentDate.toLocaleDateString(undefined, { month: "long", year: "numeric" }))
                .margin(0)
                .fontWeight("700")
                .fontSize(1.25, em)
                .color("var(--headertext)")

            HStack(() => {
                button("+ New Event")
                    .paddingVertical(0.52, em)
                    .paddingRight(1, em)
                    .paddingLeft(0.8, em)
                    .marginHorizontal(0.4, em)
                    .background("transparent")
                    .color("var(--headertext)")
                    .border("1px solid var(--divider)")
                    .borderRadius(0.5, em)
                    .fontSize(0.83, em)
                    .fontWeight("600")
                    .cursor("pointer")
                    .onHover(function(hovering) {
                        this.style.background = hovering ? "var(--divider)" : "transparent";
                    })
                    .onClick((done) => { if (done) this.actions.onNewEvent() })

                this.navBtn("‹", goToPrevious)
                this.navBtn("Today", goToCurrent)
                this.navBtn("›", goToNext)
            })
            .gap(0.4, em)
            .alignItems("center")
        })
        .paddingHorizontal(1.5, em)
        .paddingVertical(0.85, em)
        .alignItems("center")
        .justifyContent("space-between")
        .borderBottom("1px solid var(--divider)")
        .width(100, pct)
        .boxSizing("border-box")
        .flexShrink(0)
    }

    navBtn(label, handler) {
        return button(label)
            .onClick((done) => {
                if(done) {
                    handler()
                }
            })
            .paddingVertical(0.38, em)
            .paddingHorizontal(label === "Today" ? 0.9 : 0.72, em)
            .border("1px solid var(--divider)")
            .borderRadius(0.45, em)
            .background("transparent")
            .color("var(--headertext)")
            .cursor("pointer")
            .fontSize(0.83, em)
            .onHover(function(hovering) {
                this.style.background = hovering ? "var(--divider)" : "transparent";
            })
    }
}

register(DesktopToolbar)