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

class DayHeaderRow extends Shadow {
    constructor(groupedDay, calendars) {
        super()
        this.groupedDay = groupedDay;
        this.calendars = calendars;
    }

    render() {
        const day = this.groupedDay.day;
        const today = calendarUtil.isToday(day);
        const allDayEvents = this.groupedDay.allDay;
        const maxEvents = allDayEvents.length;

        VStack(() => {
            HStack(() => {
                VStack(() => {
                    p(day.toLocaleDateString("en-US", { weekday: "long" }).toUpperCase())
                        .margin(0)
                        .fontSize(0.72, em)
                        .fontWeight("600")
                        .letterSpacing(0.04, em)
                        .opacity(today ? 1 : 0.5)
                        .textAlign("left")

                    h3(day.toLocaleDateString("en-US", { month: "long", day: "numeric" }))
                        .margin(0)
                        .fontSize(1.35, em)
                        .fontWeight("700")
                        .lineHeight("1")
                })
                .color(today ? "var(--quillred)" : "var(--headertext)")
                .flex(1)
                .alignItems("flex-start")
                .justifyContent("center")
                .gap(0.3, em)
                .paddingTop(0.85, em)
                .paddingBottom(maxEvents > 0 ? (maxEvents * 2.0) + 0.7 : 0.35, em)
                .paddingHorizontal(0.75, em)
                .boxSizing("border-box")
            })
            .width(100, pct)
            .alignItems("stretch")

            if (allDayEvents.length > 0) {
                this.allDaySection(allDayEvents);
            }
        })
        .width(100, pct)
        .position("relative")
        .background("var(--sidebottombars)")
        .borderBottom("1px solid var(--divider)")
    }

    allDaySection(events) {
        const rowHeight = 1.75;
        const gap = 0.25;
        const totalHeight = events.length * rowHeight + (events.length - 1) * gap;

        ZStack(() => {
            events.forEach((event, slot) => {
                const color = calendarUtil.getCalendarColor(this.calendars, event.calendars.find(id => this.calendars.some(c => c.id === id)) ?? event.calendars[0]);
                const topEm = slot * (rowHeight + gap);

                HStack(() => {
                    p(event.title)
                        .margin(0)
                        .fontSize(0.72, em)
                        .fontWeight("600")
                        .color("white")
                        .whiteSpace("nowrap")
                        .overflow("hidden")
                })
                .position("absolute")
                .top(topEm, em)
                .left(0.25, em)
                .right(0.25, em)
                .height(rowHeight, em)
                .padding(0.35, em)
                .background(color)
                .borderRadius(0.25, em)
                .alignItems("center")
                .boxSizing("border-box")
                .overflow("hidden")
                .pointerEvents("auto")
                .cursor("pointer")
                .onTap(() => $("bottomsheet-").showEvent(event))
            })
        })
        .position("absolute")
        .bottom(0.25, em)
        .left(0)
        .right(0)
        .height(totalHeight, em)
        .boxSizing("border-box")
        .pointerEvents("none")
    }
}

register(DayHeaderRow)