import { api, LightningElement } from "lwc";
import cx from "classnames";
import debounce from "debounce";
import { toJson } from "dxUtils/normalizers";
import { toDxColor } from "dxUtils/css";

export default class SectionBanner extends LightningElement {
    private _images?: {
        desktop: {
            alt: string;
            src: string;
        };
        mobile: {
            alt: string;
            src: string;
        };
    };
    private _quoteAttribution?: {
        desktop: {
            text: string;
            subtext?: string;
        };
        mobile: {
            text: string;
            subtext?: string;
        };
    };
    @api header!: string;
    @api body!: string;
    @api hideTopGraphic = false;
    @api backgroundColor = "indigo-vibrant-20";
    @api hasQuote = false;
    @api quoteGraphicSrc?: string;

    private isMobile = false;
    private mediaQueryList?: MediaQueryList;

    @api
    get images() {
        return this._images;
    }
    set images(value) {
        this._images = value && toJson(value);
    }

    @api
    get quoteAttribution() {
        return this._quoteAttribution;
    }
    set quoteAttribution(value) {
        this._quoteAttribution = value && toJson(value);
    }

    get environment() {
        return this.isMobile ? "mobile" : "desktop";
    }

    get imgSrc() {
        return this.images?.[this.environment]?.src || "";
    }

    get imgAlt() {
        return this.images?.[this.environment]?.alt || "";
    }

    get quoteAttributionText() {
        return this.quoteAttribution?.[this.environment]?.text || "";
    }

    get quoteAttributionSubtext() {
        return this.quoteAttribution?.[this.environment]?.subtext || "";
    }

    get containerStyle() {
        return cx("container", !this.hideTopGraphic && "top-margin");
    }

    get quoteContentStyle() {
        return cx(this.hasQuote && "quote-content");
    }

    get quoteAttributionStyle() {
        return cx("quote-attribution", {
            "dx-text-display-7": !this.isMobile,
            "dx-text-display-8": this.isMobile
        });
    }

    get quoteAttributionSubtextStyle() {
        return cx("quote-attribution-subtext", {
            "is-mobile": this.isMobile
        });
    }

    get contentBodyStyle() {
        return cx(this.header ? "content-body" : "dx-text-display-6");
    }

    get style() {
        const backgroundColor = `background-color: ${toDxColor(
            this.backgroundColor
        )};`;

        return `${backgroundColor}`;
    }

    private handleMediaQueryChange = debounce((evt: MediaQueryListEvent) => {
        this.isMobile = evt.matches;
    }, 64);

    connectedCallback() {
        this.mediaQueryList = window.matchMedia(
            "screen and (max-width: 480px)"
        );
        this.isMobile = this.mediaQueryList.matches;
        this.mediaQueryList.addEventListener(
            "change",
            this.handleMediaQueryChange
        );
    }

    disconnectedCallback() {
        this.mediaQueryList?.removeEventListener(
            "change",
            this.handleMediaQueryChange
        );
    }
}