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;
        /**
         * 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, description, deviceSize, el, foregroundColor, groupLinks, } = this;
        const small = this.isSmall();
        const showComplianceSection = isSlotUsed(el, "logo") ||
            isSlotUsed(el, "caption") ||
            caption ||
            copyright;
        return (h(Host, { key: 'b25023d5362ca9baca9c01a319c038eb4540e97a', 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: '053aafbd7016c4a74230cb3f4bd15ff1bd331761', ref: (el) => (this.footerEl = el) }, (isSlotUsed(el, "description") || description) && (h("div", { key: 'c963c42c0f4d0a19d8fe9c133ca3cf9261398d70', class: "footer-description" }, h("ic-section-container", { key: '0dd1fd94781722a494368e146f2a0b8417e1849d', aligned: aligned, fullHeight: true }, h("div", { key: '61a25339f136d624ef39c3f72ff920735eac3656', class: "footer-description-inner" }, h("ic-typography", { key: '4655d70fa69d5cc7ed44e352d37646a93b95067a', variant: "body" }, h("slot", { key: '3a04c622d16c8fbad42bde6e5a62b94a7cc0dbfc', name: "description" }, description)))))), isSlotUsed(el, "link") && (h("div", { key: '9a98191b7712a906aafa5295786586cdca8fdd63', 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: '26f71e1feac14df4ffd9a5f945823e7d8a334f87', class: "footer-compliance" }, h("ic-section-container", { key: 'd4b53cd4e8b1170b629f6493188f48438c1edd00', aligned: aligned, fullHeight: true }, h("div", { key: '50b07020da89a9ebe53d6fd035b7139ac8ca2282', class: "footer-compliance-inner" }, isSlotUsed(el, "logo") && (h("div", { key: '2ea27171f29498639b56426d4d21fbf4afc98798', class: "footer-logo" }, h("slot", { key: 'b09b28173314c1b0a63ce1ecdf60822d7497ed80', name: "logo" }))), (isSlotUsed(el, "caption") || caption) && (h("div", { key: 'b4ce260f52b3216ec3c73430311b7659e651a544', class: "footer-caption" }, h("ic-typography", { key: 'f83868bac58237dcd8586d4d161db7677f0b2b16', variant: deviceSize <= IC_DEVICE_SIZES.M ? "caption" : "body" }, h("slot", { key: '3da3e317b1f62be124bbabc9283e08258dc57141', name: "caption" }, caption)))), copyright && (h("div", { key: '63b18007efa190d038048a1d57223dc0547a64ad', class: {
                ["footer-copyright"]: true,
                ["classification-spacing"]: hasClassificationBanner(),
            } }, h("ic-typography", { key: '0dc6200bfb89a7b34743c442f9c61829cd4b9374', variant: deviceSize <= IC_DEVICE_SIZES.M
                ? "caption-uppercase"
                : "label-uppercase" }, "\u00A9 Crown Copyright"))))))))));
    }
    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"
            },
            "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
