{
    class BuckeyeAlert {
        private readonly wrapper: Element;
        private readonly url: string;

        constructor(private readonly element: HTMLElement, private readonly settings: BuckeyeAlertSettings = {}) {
            const dataUrl = this.element.dataset.buxAlertUrl;
            this.url = settings.url || dataUrl || "https://www.osu.edu/feeds/emergency-alert.rss";

            if (!this.url) {
                throw new Error("BuckeyeAlert: No URL provided in settings or data-bux-alert-url attribute.");
            }

            this.wrapper = this.element.closest('.bux-buckeye-alert__wrapper') as HTMLElement;

            this.element.setAttribute("hidden", "");
            if (this.wrapper) {
                this.wrapper.setAttribute("hidden", "");
            }
        }

        initialize() {
            fetch(this.url)
                .then((response) => response.text())
                .then((xmlString) => new DOMParser().parseFromString(xmlString, "text/xml"))
                .then((data) => {
                    const alerts = data.querySelectorAll("item");
                    if (alerts.length > 0) {
                        this.buildAlerts(alerts);
                        this.displayAlerts();
                    }
                })
                .catch((error) => {
                    console.error("Error fetching Buckeye Alerts:", error);
                });
        }

        static start() {
            const alertElements = document.querySelectorAll("#bux-buckeye-alert");
            for (const element of alertElements) {
                new BuckeyeAlert(element as HTMLElement).initialize();
            }
        }


        buildAlerts(alerts: NodeListOf<Element>) {
            const container = document.createElement("div");
            const icon = document.createElement("div");
            const heading = document.createElement("h2");
            container.classList.add("bux-buckeye-alert-container");
            icon.classList.add("bux-buckeye-alert-container__icon");
            container.append(icon);
            container.append(heading);
            heading.id = "buckeye-alert-title";
            heading.textContent = "Buckeye Alert Emergency Message";
            for (const alert of alerts) {
                const description = alert.children[2];
                const {textContent: message} = description;
                container.innerHTML += message;
            }
            this.element.append(container);
        }

        displayAlerts() {
            const wrapper = this.element.parentElement;
            if (!wrapper) {
                return;
            }
            this.element.removeAttribute("hidden");
            wrapper.removeAttribute("hidden");
        }
    }

    BuckeyeAlert.start();
}