import { Host, h } from "@stencil/core";
export class SpwCard {
    constructor() {
        this.hasImage = false;
        this.childHoveredCount = 0;
        /** Type de variante de carte */
        this.variant = 'news';
        /** Type d'élément du bouton */
        this.elementType = 'a';
        /** Attribut target, s'applique uniquement si href est rempli */
        this.target = '_self';
        /** Si vrai, les cartes ont la même hauteur */
        this.fullHeight = false;
        /** Si désactivée, la carte n'est pas utilisable */
        this.disabled = false;
        this.onNestedCardEnter = () => {
            this.childHoveredCount++;
            this.setImageHovered(false);
        };
        this.onNestedCardLeave = () => {
            this.childHoveredCount = Math.max(0, this.childHoveredCount - 1);
            if (this.childHoveredCount === 0 && this.isPointerInside(this.el)) {
                this.setImageHovered(true);
            }
        };
    }
    componentWillLoad() {
        this.checkForImage();
        this.applyVariantToChildren();
        this.attachNestedCardListeners();
    }
    slotChanged() {
        this.checkForImage();
        this.applyVariantToChildren();
        this.attachNestedCardListeners();
    }
    onMouseEnter() {
        if (this.childHoveredCount === 0) {
            this.setImageHovered(true);
        }
    }
    onMouseLeave() {
        this.setImageHovered(false);
    }
    attachNestedCardListeners() {
        requestAnimationFrame(() => {
            const nestedCards = this.el.querySelectorAll('spw-card');
            nestedCards.forEach(card => {
                card.addEventListener('mouseenter', this.onNestedCardEnter.bind(this), true);
                card.addEventListener('mouseleave', this.onNestedCardLeave.bind(this), true);
            });
        });
    }
    isPointerInside(element) {
        const rect = element.getBoundingClientRect();
        const { left, top, right, bottom } = rect;
        const { clientX, clientY } = window;
        return clientX >= left && clientX <= right && clientY >= top && clientY <= bottom;
    }
    checkForImage() {
        requestAnimationFrame(() => {
            const imageElement = this.el.querySelector('spw-card-image');
            const contentElement = this.el.querySelector('spw-card-content');
            this.hasImage = !!imageElement;
            if (!this.hasImage) {
                contentElement === null || contentElement === void 0 ? void 0 : contentElement.classList.add('--no-image');
            }
        });
    }
    formatDate(date) {
        if (!date)
            return [];
        const parts = date.split('/');
        return parts.flatMap((part, index) => (index < parts.length - 1 ? [h("span", null, part), h("span", null, "/")] : [h("span", null, part)]));
    }
    applyVariantToChildren() {
        requestAnimationFrame(() => {
            const variantClass = `--${this.variant}`;
            const contentElement = this.el.querySelector('spw-card-content');
            const imageElement = this.el.querySelector('spw-card-image');
            const titleElement = this.el.querySelector('spw-card-title');
            const excerptElement = this.el.querySelector('spw-card-excerpt');
            const subtagsElement = this.el.querySelector('spw-card-subtags');
            contentElement === null || contentElement === void 0 ? void 0 : contentElement.classList.add(variantClass);
            imageElement === null || imageElement === void 0 ? void 0 : imageElement.classList.add(variantClass);
            titleElement === null || titleElement === void 0 ? void 0 : titleElement.classList.add(variantClass);
            excerptElement === null || excerptElement === void 0 ? void 0 : excerptElement.classList.add(variantClass);
            subtagsElement === null || subtagsElement === void 0 ? void 0 : subtagsElement.classList.add(variantClass);
        });
    }
    setImageHovered(isHovered) {
        const imageElement = this.el.querySelector('spw-card-image');
        const titleElement = this.el.querySelector('spw-card-title');
        if (imageElement && this.href) {
            imageElement.classList.toggle('--hovered', isHovered);
        }
        if (titleElement && this.href) {
            titleElement.classList.toggle('--hovered', isHovered);
        }
    }
    get elementClass() {
        return {
            'spw-card': true,
            'spw-card--hoverable': !!this.href,
            'spw-card--no-image': !this.hasImage,
            [`spw-card--${this.variant}`]: true,
        };
    }
    render() {
        const { href, rel, target, dateStart, dateEnd, variant } = this;
        const TagType = this.href === undefined ? 'div' : 'a';
        const attrs = TagType === 'div'
            ? {}
            : {
                href,
                rel,
                target,
            };
        const ariaAttributes = {
            'aria-label': this === null || this === void 0 ? void 0 : this.accAriaLabel,
            'aria-disabled': this.disabled ? 'true' : null,
        };
        return (h(Host, { key: '1ba4f06ba66af1625688a01d08c34fab95499577', class: { '--is-full-height': this.fullHeight } }, h("article", { key: '135ae12d051e9ebc078029c99ac52ea49bf540db', class: this.elementClass }, variant === 'event' && (h(TagType, Object.assign({ key: '99c5e749128c5293c44ddeb4c85bf143dbe3c6b1' }, attrs, { class: "spw-card__dates" }), dateStart && h("div", { key: 'fcf0661e3aae2de10ad7b845da453553662b3154', class: "spw-card__date-item" }, this.formatDate(dateStart)), dateEnd && h("div", { key: '11cc7956f31154ac081e6e819294fcfe6aafff5d', class: "spw-card__date-item" }, this.formatDate(dateEnd)))), h(TagType, Object.assign({ key: 'bc3380c036847c8ac197e731f05f0333a2734634' }, attrs, ariaAttributes, { class: "spw-card__link" }), h("slot", { key: 'c4c0f79011ee0ca8a893a080c177f17c51526768' })))));
    }
    static get is() { return "spw-card"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["spw-card.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["spw-card.css"]
        };
    }
    static get properties() {
        return {
            "variant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'news' | 'vertical' | 'video' | 'event' | 'sidebar' | 'highlighted' | 'people' | 'rounded-picture'",
                    "resolved": "\"event\" | \"highlighted\" | \"news\" | \"people\" | \"rounded-picture\" | \"sidebar\" | \"vertical\" | \"video\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Type de variante de carte"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "variant",
                "defaultValue": "'news'"
            },
            "elementType": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Type d'\u00E9l\u00E9ment du bouton"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "element-type",
                "defaultValue": "'a'"
            },
            "href": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Sp\u00E9cifie le lien si n\u00E9cessaire"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "href"
            },
            "target": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Attribut target, s'applique uniquement si href est rempli"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "target",
                "defaultValue": "'_self'"
            },
            "rel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Remplit l'attribut rel"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "rel"
            },
            "dateStart": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "D\u00E9finir une date de d\u00E9but si la carte est un \u00E9v\u00E8nement"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "date-start"
            },
            "dateEnd": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "D\u00E9finir une date de fin si la carte est un \u00E9v\u00E8nement"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "date-end"
            },
            "fullHeight": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Si vrai, les cartes ont la m\u00EAme hauteur"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "full-height",
                "defaultValue": "false"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Si d\u00E9sactiv\u00E9e, la carte n'est pas utilisable"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "disabled",
                "defaultValue": "false"
            },
            "accAriaLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Remplit l'attribut aria-label, utilis\u00E9 \u00E0 des fins d'accessibilit\u00E9"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "acc-aria-label"
            }
        };
    }
    static get states() {
        return {
            "hasImage": {}
        };
    }
    static get elementRef() { return "el"; }
    static get listeners() {
        return [{
                "name": "slotchange",
                "method": "slotChanged",
                "target": undefined,
                "capture": false,
                "passive": false
            }, {
                "name": "mouseenter",
                "method": "onMouseEnter",
                "target": undefined,
                "capture": false,
                "passive": true
            }, {
                "name": "mouseleave",
                "method": "onMouseLeave",
                "target": undefined,
                "capture": false,
                "passive": true
            }];
    }
}
