import {TesoftComponent} from "../scripts/main.ts";
import {TesoftButton} from "./button.ts";

export class TesoftPagination extends TesoftComponent {
    static observedAttributes = ["cur-page", "last-page"];

    private readonly curPageDiv: HTMLDivElement;
    private readonly prevButton: TesoftButton;
    private readonly nextButton: TesoftButton;

    constructor() {
        super();

        const template = document.getElementById("tesoft-pagination-template") as HTMLTemplateElement;
        const templateContent = template.content;

        const shadowRoot = this.attachShadow({mode: "open"});
        shadowRoot.appendChild(templateContent.cloneNode(true));

        this.curPageDiv = shadowRoot.querySelector<HTMLDivElement>(".cur-page")!;
        this.prevButton = shadowRoot.querySelector<TesoftButton>(".prev")!;
        this.nextButton = shadowRoot.querySelector<TesoftButton>(".next")!;
    }

    // noinspection JSUnusedGlobalSymbols
    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
        if (name === "cur-page") {
            this.update(this.parsePage(newValue), this.parsePage(this.getAttribute("last-page")));
        } else if (name === "last-page") {
            this.update(this.parsePage(this.getAttribute("cur-page")), this.parsePage(newValue));
        }
    }

    set curPage(value: number) {
        this.setAttribute("cur-page", value.toString());
    }

    set lastPage(value: number) {
        this.setAttribute("last-page", value.toString());
    }

    private update(curPage: number, lastPage: number) {
        this.curPageDiv.innerText = curPage.toString();

        if (curPage <= 1) {
            this.prevButton.setAttribute("disabled", "");
        } else {
            this.prevButton.removeAttribute("disabled");
        }
        this.prevButton.onclick = () => {
            this.dispatchEvent(new CustomEvent("update-page", {
                bubbles: true,
                cancelable: true,
                composed: true,
                detail: {
                    page: curPage - 1,
                },
            }));
        };

        if (curPage >= lastPage) {
            this.nextButton.setAttribute("disabled", "");
        } else {
            this.nextButton.removeAttribute("disabled");
        }
        this.nextButton.onclick = () => {
            this.dispatchEvent(new CustomEvent("updatePage", {
                bubbles: true,
                cancelable: true,
                composed: true,
                detail: {
                    page: curPage + 1,
                },
            }));
        };
    }

    private parsePage(str: string | null): number {
        return str ? parseInt(str) : 1;
    }
}

customElements.define("tesoft-pagination", TesoftPagination);
