import calendarUtil from "../calendarUtil.js"
import "./ToolbarPopout.js";

class CalendarToolbar extends Shadow {
    constructor(currentDate, weekStartsOn, actions, calendars, events, showPopout, options = {}) {
        super()
        this.currentDate = currentDate
        this.weekStartsOn = weekStartsOn
        this.goToPrevious = actions.goToPrevious;
        this.goToCurrent = actions.goToCurrent;
        this.goToNext = actions.goToNext;
        this.goToDate = actions.goToDate;
        this.calendars = calendars;
        this.events = events;
        this.showPopout = showPopout;
        this.onBack = options.onBack ?? null;
        this.viewModeOverride = options.viewModeOverride ?? null;
    }

    render() {
        let popout;

        VStack(() => {
            HStack(() => {
                if (this.onBack) {
                    BackButton(true, false, this.onBack)
                        .position("absolute")
                        .left(0.75, em)
                        .bottom(0.2, em)
                        .transform("scale(0.75)")
                        .transformOrigin("left center")
                }
                
                h2(this.getToolbarLabel(this.currentDate))
                    .margin(0)
                    .fontWeight("600")
                    .color("var(--headertext)")
                    .paddingLeft(this.onBack ? 2 : 0, em)
                    .state("label", function (label) {
                        if (label) {
                            this.innerText = label;
                        }
                    })

                HStack(() => {
                    if (!window.isMobile()) {
                        this.navButton("‹", this.goToPrevious)
                        this.navButton("Today", this.goToCurrent)
                        this.navButton("›", this.goToNext)
                    }
                    this.navButton("⊞", () => this.togglePopout(popout))
                })
                .gap(0.5, em)
                .alignItems("center")
            })
            .boxSizing("border-box")
            .width(100, pct)
            .alignItems("flex-end")
            .position("relative")
            .overflow("visible")
            .paddingBottom(0.9, em)
            .paddingHorizontal(1, em)
            .justifyContent("space-between")

            popout = ToolbarPopout(this.currentDate, this.weekStartsOn, this.calendars, this.events, this.showPopout, (date) => this.goToDate(date), (date) => {
                this.$("h2").attr({ "label": this.getToolbarLabel(date)});
            });
        })
        .overflow("visible")
        .borderBottom("1px solid var(--main)")
        .width(100, pct)
    }

    togglePopout(popout) {
        this.showPopout = !this.showPopout;
        $("calendar-").showPopout = this.showPopout;
        if (popout) {
            popout.showPopout = this.showPopout;
            popout.style.maxHeight = this.showPopout ? `${popout.layout.openHeight}em` : "0em";
        }
        if (!this.showPopout) {
            const newLabel = this.getToolbarLabel(this.currentDate)
            const oldLabel = this.$("h2").innerText;
            this.$("h2").attr({ "label": newLabel });
            if (newLabel !== oldLabel) {
                setTimeout(() => {
                    this.rerender();
                }, 300);
            }  
        }
    }

    navButton(label, handler) {
        const isWide = label === "Today";
        return button(label)
            .onTap(handler)
            .paddingVertical(0.45, em)
            .fontSize(1, rem)
            .paddingHorizontal(isWide ? 0.9 : 0.8, em)
            .border("1px solid var(--desktop-item-border)")
            .borderRadius(0.6, em)
            .background("var(--desktop-item-background)")
            .color("var(--text)")
            .cursor("pointer");
    }

    getToolbarLabel(date) {
        const viewMode = this.viewModeOverride ?? $("calendar-").viewMode;

        if (viewMode === "week") {
            return date.toLocaleDateString(undefined, { month: "long", year: "numeric" });
        }
        if (viewMode === "day") {
            return date.toLocaleDateString(undefined, { month: "long", day: "numeric", year: "numeric" });
        }
        if (viewMode === "month") {
            return date.toLocaleDateString(undefined, { month: "long", year: "numeric" });
        }
        return "";
    }
}

register(CalendarToolbar)