import {capitalize, formatDate, sendApiGet, TesoftComponent} from "../scripts/main.ts";
import {TesoftLoaderSection} from "./loader-section.ts";
import {TesoftBadge} from "./badge.ts";
import {TesoftTag} from "./tag.ts";
import {TesoftError} from "./error.ts";

enum ArticleStatus {
    Draft = 0,
    Published = 1,
    Offline = 2,
}

export class TesoftBlogArticle extends TesoftComponent {
    private readonly loaderSection: TesoftLoaderSection;
    private readonly article: HTMLDivElement;
    private readonly heading: HTMLHeadingElement;
    private readonly datesDiv: HTMLDivElement;
    private readonly tagsDiv: HTMLDivElement;
    private readonly contentDiv: HTMLDivElement;
    private readonly error: TesoftError;

    constructor() {
        super();

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

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

        this.loaderSection = shadowRoot.querySelector<TesoftLoaderSection>("tesoft-loader-section")!;
        this.article = shadowRoot.querySelector<HTMLDivElement>(".article")!;
        this.heading = shadowRoot.querySelector<HTMLHeadingElement>("h1")!;
        this.datesDiv = shadowRoot.querySelector<HTMLDivElement>(".dates")!;
        this.tagsDiv = shadowRoot.querySelector<HTMLDivElement>(".tags")!;
        this.contentDiv = shadowRoot.querySelector<HTMLDivElement>(".content")!;
        this.error = shadowRoot.querySelector<TesoftError>("tesoft-error")!;
    }

    async load(id: number, constructUrl: (tag: string) => string) {
        const response = await sendApiGet(`blog/${id}`, {});
        if (response.ok) {
            const body = await response.json();

            this.heading.textContent = body.title;

            const badgeText = getBadgeText(body.status);
            if (badgeText) {
                const badge = document.createElement("tesoft-badge") as TesoftBadge;
                badge.textContent = badgeText;
                badge.gold = "";
                this.heading.appendChild(badge);
            }

            this.datesDiv.textContent = formatArticleDate(new Date(body.date), body['mod-date'] ? new Date(body['mod-date']) : null);

            for (const tagName of body.tags) {
                const tag = document.createElement("tesoft-tag") as TesoftTag;
                tag.innerText = tagName;
                tag.href = constructUrl(tagName);
                tag.selected = "";
                this.tagsDiv.appendChild(tag);
            }

            this.contentDiv.innerHTML = body.content;
        } else {
            const body = await response.json();
            this.error.textContent = `${capitalize(body.message)}.`;
            this.error.classList.remove("hidden");
            this.article.classList.add("hidden");
        }

        this.loaderSection.finish();
    }
}

export function getBadgeText(status: ArticleStatus): string | null {
    switch (status) {
        case ArticleStatus.Draft:
            return "Draft";
        case ArticleStatus.Offline:
            return "Offline";
        default:
            return null;
    }
}

export function formatArticleDate(date: Date, modDate: Date | null): string {
    return `Posted on ${formatDate(date)}${modDate === null ? "" : `, last modified on ${formatDate(modDate)}`}`;
}

customElements.define("tesoft-blog-article", TesoftBlogArticle);
