import "../../components/BackButton.js"
import "../CalendarForm.js"

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

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

    constructor(calendars = [], selectedCalendars = [], actions) {
        super()
        this.calendars = calendars;
        this.selectedCalendars = selectedCalendars;
        this.onSelection = actions.onSelection;
        this.onCalendarAdded = actions.onCalendarAdded;
        this.onCalendarUpdated = actions.onCalendarUpdated;
        this.onCalendarDeleted = actions.onCalendarDeleted;
    }

    isSelected(calendar) {
        return this.selectedCalendars.some(c => c.id === calendar.id);
    }

    toggleCalendar(calendar) {
        const isSelected = this.isSelected(calendar);

        if (isSelected && this.selectedCalendars.length === 1) return;

        let newSelectedIds;
        if (isSelected) {
            newSelectedIds = this.selectedCalendars
                .filter(c => c.id !== calendar.id)
                .map(c => c.id);
        } else {
            newSelectedIds = [...this.selectedCalendars.map(c => c.id), calendar.id];
        }

        this.selectedCalendars = this.calendars.filter(c => newSelectedIds.includes(c.id));
        this.rerender();
    }

    render() {
        this.calFormSheet = BottomSheet(200)

        const doClose = () => {
            $("bottomsheet-")._closeOverride = null
            $("bottomsheet-").setSheet(false)
            setTimeout(() => this.onSelection(this.selectedCalendars), 300)
        }
        $("bottomsheet-")._closeOverride = doClose

        VStack(() => {
            HStack(() => {
                BackButton(false, true, doClose)
                .zIndex(3)

                h2("Calendars")
                    .position("absolute")
                    .zIndex(2)
                    .color("var(--headertext)")
                    .paddingVertical(0.5, em)
                    .margin(0)
                    .top(0)
                    .left(0)
                    .width(100, pct)
            })
            .position("relative")
            .background(util.darkMode() ? "var(--darkred)" : "var(--sidebottombars)")
            .borderTopLeftRadius("10px").borderTopRightRadius("10px")
            .border("1px solid var(--divider)")
            .textAlign("center")

            if (this.calendars.length > 0) {
                h3("Visibility")
                    .marginBottom(0)
                    .marginLeft(1.25, em)

                VStack(() => {
                    this.calendars.forEach(cal => {
                        const selected = this.isSelected(cal);

                        HStack(() => {
                            HStack(() => {
                                p("")
                                    .width(2, em)
                                    .height(2, em)
                                    .background(selected ? cal.color : "transparent")
                                    .borderRadius(100, pct)
                                    .border(`3.5px solid ${cal.color}`)
                                    .boxSizing("border-box")
                                p(cal.name)
                                    .fontSize(1.1, em)
                                    .opacity(selected ? 1 : 0.5)
                            })
                            .gap(1, em)
                            .alignItems("center")
                            .flex(1)
                            .cursor("pointer")
                            .onTap(async () => {
                                await capacitor.Haptics.impact({ style: capacitor.ImpactStyle.Light });
                                this.toggleCalendar(cal)
                            })

                            p("i")
                                .width(1.5, em)
                                .height(1.5, em)
                                .borderRadius(100, pct)
                                .border("2px solid var(--text)")
                                .boxSizing("border-box")
                                .display(cal.owner_id === global.profile.id ? "" : "none")
                                .textAlign("center")
                                .lineHeight("1.4em")
                                .fontSize(1.3, em)
                                .fontWeight("bold")
                                .color("var(--text)")
                                .opacity(0.5)
                                .flexShrink(0)
                                .cursor("pointer")
                                .onTap(async () => {
                                    await capacitor.Haptics.impact({ style: capacitor.ImpactStyle.Light });
                                    let calFormEl
                                    const closeCalForm = () => {
                                        this.calFormSheet._closeOverride = null
                                        this.calFormSheet.setSheet(false)
                                    }
                                    const onSaveErrorEdit = () => {
                                        this.calFormSheet._closeOverride = () => this.calFormSheet.forceClose()
                                    }
                                    this.calFormSheet.show(() => {
                                        calFormEl = CalendarForm(
                                            closeCalForm,
                                            (updated) => {
                                                closeCalForm()
                                                setTimeout(() => {
                                                    this.calendars = this.calendars.map(c => c.id === updated.id ? updated : c);
                                                    this.selectedCalendars = this.selectedCalendars.map(c => c.id === updated.id ? updated : c);
                                                    this.onCalendarUpdated(updated);
                                                    this.rerender();
                                                }, 300);
                                            },
                                            cal,
                                            (deletedId) => {
                                                closeCalForm()
                                                setTimeout(() => {
                                                    this.calendars = this.calendars.filter(c => c.id !== deletedId);
                                                    this.selectedCalendars = this.selectedCalendars.filter(c => c.id !== deletedId);
                                                    this.onCalendarDeleted(deletedId);
                                                    this.rerender();
                                                }, 300);
                                            },
                                            onSaveErrorEdit
                                        ).height(100, pct)
                                    })
                                    this.calFormSheet._closeOverride = async () => {
                                        const saved = await calFormEl?.trySave()
                                        if (saved === null) {
                                            this.calFormSheet.setSheet(true)
                                            this.calFormSheet._closeOverride = () => this.calFormSheet.forceClose()
                                            return
                                        }
                                        closeCalForm()
                                        if (saved !== cal) {
                                            setTimeout(() => {
                                                this.calendars = this.calendars.map(c => c.id === saved.id ? saved : c)
                                                this.selectedCalendars = this.selectedCalendars.map(c => c.id === saved.id ? saved : c)
                                                this.onCalendarUpdated(saved)
                                                this.rerender()
                                            }, 300)
                                        }
                                    }
                                })
                        })
                        .padding(0.75, em)
                        .gap(0.75, em)
                        .alignItems("center")
                    })
                })
                .background("var(--darkaccent)")
                .margin(1, em)
                .marginTop(0.5, em)
                .border("1px solid var(--divider)")
                .borderRadius(12, px)
            }

            HStack(() => {
                img(this.getImageURL("calendar"), "1.5em", "1.5em")
                p("Add Calendar")
                    .fontSize(1.1, em)
                    .paddingLeft(0.5, em)
            })
            .background("var(--darkaccent)")
            .color("var(--text)")
            .gap(0.75, em)
            .alignItems("center")
            .padding(1, em)
            .paddingVertical(0.75, em)
            .marginHorizontal(1, em)
            .border("1px solid var(--divider)")
            .borderRadius(12, px)
            .cursor("pointer")
            .onTap(async () => {
                await capacitor.Haptics.impact({ style: capacitor.ImpactStyle.Light });
                let calFormEl
                const closeDirect = () => {
                    this.calFormSheet._closeOverride = null
                    this.calFormSheet.setSheet(false)
                }
                const onSaveErrorAdd = () => {
                    this.calFormSheet._closeOverride = () => this.calFormSheet.forceClose()
                }
                this.calFormSheet.show(() => {
                    calFormEl = CalendarForm(
                        closeDirect,
                        (calendar) => {
                            closeDirect()
                            setTimeout(() => {
                                this.calendars = [...this.calendars, calendar]
                                this.selectedCalendars = [...this.selectedCalendars, calendar]
                                this.onCalendarAdded(calendar)
                                this.rerender()
                            }, 300)
                        },
                        null,
                        null,
                        onSaveErrorAdd
                    ).height(100, pct)
                })
                this.calFormSheet._closeOverride = async () => {
                    const saved = await calFormEl?.trySave()
                    if (saved === null) {
                        this.calFormSheet.setSheet(true)
                        this.calFormSheet._closeOverride = () => this.calFormSheet.forceClose()
                        return
                    }
                    closeDirect()
                    if (saved) {
                        setTimeout(() => {
                            this.calendars = [...this.calendars, saved]
                            this.selectedCalendars = [...this.selectedCalendars, saved]
                            this.onCalendarAdded(saved)
                            this.rerender()
                        }, 300)
                    }
                }
            })
        })
        .width(100, pct)
        .boxSizing("border-box")
    }
}

register(CalendarOptions)