import { h, Host, } from "@stencil/core";
import { IC_DEVICE_SIZES } from "../../utils/constants";
import { getCurrentDeviceSize, getBrandForegroundAppearance, checkResizeObserver, hasClassificationBanner, isSlotUsed, renderDynamicChildSlots, } from "../../utils/helpers";
import { IcBrandForegroundEnum, } from "../../utils/types";
/**
 * @slot description - Content will be rendered at the top of the footer.
 * @slot link - Content will be rendered between description and logos.
 * @slot logo - Content will be rendered underneath footer links.
 * @slot caption - Content will be rendered above Crown Copyright.
 */
export class Footer {
    constructor() {
        this.resizeObserver = null;
        this.hostMutationObserver = null;
        this.deviceSize = IC_DEVICE_SIZES.XL;
        this.foregroundColor = getBrandForegroundAppearance();
        /**
         * The alignment of the section containers used within the footer.
         */
        this.aligned = "left";
        /**
         * The screen size breakpoint at which to switch to the small layout.
         */
        this.breakpoint = "medium";
        /**
         * If `true`, the footer will display the crown copyright at the bottom.
         */
        this.copyright = true;
        /**
         * The text displayed for the copyright notice if `copyright` is `true`.
         */
        this.copyrightText = "© Crown Copyright";
        /**
         * If `true`, the footer will be set up to handle link groups instead of standalone links.
         */
        this.groupLinks = false;
        this.resizeObserverCallback = (currSize) => {
            if (currSize !== this.deviceSize) {
                this.deviceSize = currSize;
            }
            this.footerResized.emit();
        };
        this.runResizeObserver = () => {
            if (this.footerEl) {
                this.resizeObserver = new ResizeObserver(() => {
                    const currSize = getCurrentDeviceSize();
                    this.resizeObserverCallback(currSize);
                });
                this.resizeObserver.observe(this.footerEl);
            }
        };
    }
    disconnectedCallback() {
        var _a;
        if (this.resizeObserver !== null) {
            this.resizeObserver.disconnect();
        }
        (_a = this.hostMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
    }
    componentWillLoad() {
        this.deviceSize = getCurrentDeviceSize();
    }
    componentDidLoad() {
        checkResizeObserver(this.runResizeObserver);
        this.hostMutationObserver = new MutationObserver((mutationList) => {
            return renderDynamicChildSlots(mutationList, "link", this);
        });
        this.hostMutationObserver.observe(this.el, {
            childList: true,
        });
    }
    brandChangeHandler(ev) {
        this.foregroundColor = ev.detail.mode;
    }
    isSmall() {
        const bp = this.breakpoint;
        return bp === "extra small"
            ? this.deviceSize < IC_DEVICE_SIZES.XS
            : bp === "small"
                ? this.deviceSize < IC_DEVICE_SIZES.S
                : bp === "medium"
                    ? this.deviceSize < IC_DEVICE_SIZES.M
                    : bp === "large"
                        ? this.deviceSize < IC_DEVICE_SIZES.L
                        : bp === "extra large"
                            ? this.deviceSize < IC_DEVICE_SIZES.XL
                            : false;
    }
    render() {
        const { aligned, caption, copyright, copyrightText, description, deviceSize, el, foregroundColor, groupLinks, } = this;
        const small = this.isSmall();
        const showComplianceSection = isSlotUsed(el, "logo") ||
            isSlotUsed(el, "caption") ||
            caption ||
            copyright;
        return (h(Host, { key: '998f2d4e2efe145b4b83e389d35aa5441493c665', class: {
                ["ic-footer"]: true,
                [`ic-footer-${small ? "small" : "sparse"}`]: true,
                [`ic-footer-${groupLinks ? "grouped" : "ungrouped"}`]: true,
                [`ic-footer-foreground-${foregroundColor}`]: true,
                // Slots will be able to infer their own color
                [`ic-footer-${IcBrandForegroundEnum.Dark}`]: foregroundColor === IcBrandForegroundEnum.Dark,
                [`ic-footer-${IcBrandForegroundEnum.Light}`]: foregroundColor === IcBrandForegroundEnum.Light,
            } }, h("footer", { key: 'c87d22d28a01bda8c3ee2b9cac46be2887713a29', ref: (el) => (this.footerEl = el) }, (isSlotUsed(el, "description") || description) && (h("div", { key: 'f308a06d6f0659a0cfce9bbf83c83a5b7002888c', class: "footer-description" }, h("ic-section-container", { key: 'b37d8391f9d6976ab470ee313cffde02fb44379e', aligned: aligned, fullHeight: true }, h("div", { key: '577f163c461029ff87860d22e5f6d8727f2700f2', class: "footer-description-inner" }, h("ic-typography", { key: 'd5511f1010de1c5e474d7a4ca300c3c65524b848', variant: "body" }, h("slot", { key: 'ee7cbda304a95acf11208bf01779669d2ae80e5b', name: "description" }, description)))))), isSlotUsed(el, "link") && (h("div", { key: 'a2c16d41f279a1241ceeacb61ab6891e1caa02b4', class: "footer-links" }, groupLinks && small ? (h("div", { class: "footer-links-inner", role: "list" }, h("slot", { name: "link" }))) : (h("ic-section-container", { fullHeight: true, aligned: aligned }, h("div", { class: "footer-links-inner", role: "list" }, h("slot", { name: "link" })))))), showComplianceSection && (h("div", { key: '612fef7b2098beeb005bca7c8c6a770073d18a84', class: "footer-compliance" }, h("ic-section-container", { key: 'c69ae2ee035e470340f5a5f23b446d0e496053cb', aligned: aligned, fullHeight: true }, h("div", { key: 'f9dbd6a02403a60af427c31d872895f55fb93d4b', class: "footer-compliance-inner" }, isSlotUsed(el, "logo") && (h("div", { key: '2f3303d4ec7608da07f229d012d28fde289088b4', class: "footer-logo" }, h("slot", { key: '4447941f54b6276e088fa3f7facc0fa938dbbd95', name: "logo" }))), (isSlotUsed(el, "caption") || caption) && (h("div", { key: '7b1d062760f15d92a97fd5edd5bd367e61a03ac6', class: "footer-caption" }, h("ic-typography", { key: 'fd22c635085c468676125e4283b59661a2092c83', variant: deviceSize <= IC_DEVICE_SIZES.M ? "caption" : "body" }, h("slot", { key: '026d7f0837f3dfa21ca81ce23e44c4a0526e6b6d', name: "caption" }, caption)))), copyright && (h("div", { key: '75c74053fbc359a6a05600f532f2c6dab5cae23b', class: {
                ["footer-copyright"]: true,
                ["classification-spacing"]: hasClassificationBanner(),
            } }, h("ic-typography", { key: '91f098b1ea0a5f0aa87e6430ad5c043c6a5fd10f', variant: deviceSize <= IC_DEVICE_SIZES.M
                ? "caption-uppercase"
                : "label-uppercase" }, copyrightText))))))))));
    }
    static get is() { return "ic-footer"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["ic-footer.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["ic-footer.css"]
        };
    }
    static get properties() {
        return {
            "aligned": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcAlignment",
                    "resolved": "\"center\" | \"full-width\" | \"left\" | undefined",
                    "references": {
                        "IcAlignment": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcAlignment"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The alignment of the section containers used within the footer."
                },
                "getter": false,
                "setter": false,
                "attribute": "aligned",
                "reflect": false,
                "defaultValue": "\"left\""
            },
            "breakpoint": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcFooterBreakpoints",
                    "resolved": "\"extra large\" | \"extra small\" | \"large\" | \"medium\" | \"small\" | undefined",
                    "references": {
                        "IcFooterBreakpoints": {
                            "location": "import",
                            "path": "./ic-footer.types",
                            "id": "src/components/ic-footer/ic-footer.types.tsx::IcFooterBreakpoints"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The screen size breakpoint at which to switch to the small layout."
                },
                "getter": false,
                "setter": false,
                "attribute": "breakpoint",
                "reflect": false,
                "defaultValue": "\"medium\""
            },
            "caption": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The caption displayed at the bottom of the footer."
                },
                "getter": false,
                "setter": false,
                "attribute": "caption",
                "reflect": false
            },
            "copyright": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the footer will display the crown copyright at the bottom."
                },
                "getter": false,
                "setter": false,
                "attribute": "copyright",
                "reflect": false,
                "defaultValue": "true"
            },
            "copyrightText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The text displayed for the copyright notice if `copyright` is `true`."
                },
                "getter": false,
                "setter": false,
                "attribute": "copyright-text",
                "reflect": false,
                "defaultValue": "\"\u00A9 Crown Copyright\""
            },
            "description": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The description displayed at the top of the footer."
                },
                "getter": false,
                "setter": false,
                "attribute": "description",
                "reflect": false
            },
            "groupLinks": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the footer will be set up to handle link groups instead of standalone links."
                },
                "getter": false,
                "setter": false,
                "attribute": "group-links",
                "reflect": false,
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "deviceSize": {},
            "foregroundColor": {}
        };
    }
    static get events() {
        return [{
                "method": "footerResized",
                "name": "footerResized",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": "Triggers on page resize and triggers style changes in footer links and link groups"
                        }],
                    "text": ""
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get listeners() {
        return [{
                "name": "brandChange",
                "method": "brandChangeHandler",
                "target": "document",
                "capture": false,
                "passive": false
            }];
    }
}
//# sourceMappingURL=ic-footer.js.map
