import { LightningElement, api } from "lwc";
import { LinkTarget, ContentType } from "typings/custom";

const MOBILE_QUERY = "(max-width: 640px)";

export abstract class ArchiveCard extends LightningElement {
    @api contentType!: ContentType;
    @api href!: string;
    @api header!: string;
    @api target: LinkTarget = "_self";

    private matchMedia!: MediaQueryList;
    protected mobile = false;

    connectedCallback(): void {
        this.matchMedia = window.matchMedia(MOBILE_QUERY);
        this.onMediaChange(this.matchMedia);
        this.matchMedia.addEventListener("change", this.onMediaChange);
    }

    disconnectedCallback(): void {
        this.matchMedia.removeEventListener("change", this.onMediaChange);
    }

    private onMediaChange = (e: MediaQueryListEvent | MediaQueryList) =>
        (this.mobile = e.matches);

    protected get badgeSize(): string {
        return (this.mobile && "small") || "default";
    }
}