import { h } from "@stencil/core";
export class SpwAccordionContent {
    constructor() {
        this.isOpened = false;
    }
    componentDidLoad() {
        this.assignItemId();
        this.updateHeight();
        window.addEventListener('resize', this.handleResize.bind(this));
        this.contentElement.addEventListener('transitionend', this.handleTransitionEnd.bind(this));
    }
    disconnectedCallback() {
        window.removeEventListener('resize', this.handleResize.bind(this));
        this.contentElement.removeEventListener('transitionend', this.handleTransitionEnd.bind(this));
    }
    assignItemId() {
        const parent = this.el.closest('spw-accordion-item');
        if (parent) {
            const itemId = parent.getAttribute('data-accordion-id');
            if (itemId) {
                this.el.setAttribute('data-accordion-id', itemId);
            }
        }
    }
    handleAccordionToggle(event) {
        const itemId = this.el.getAttribute('data-accordion-id');
        if (event.detail.id === itemId) {
            this.isOpened = event.detail.isOpen;
            this.updateHeight();
        }
    }
    handleResize() {
        this.updateHeight();
        setTimeout(() => {
            this.updateHeight();
        }, 300);
    }
    handleTransitionEnd(event) {
        if (event.propertyName === 'max-height') {
            if (this.isOpened) {
                this.contentElement.classList.add('spw-accordion-content--is-opened');
            }
            else {
                this.contentElement.classList.remove('spw-accordion-content--is-opened');
            }
        }
    }
    updateHeight() {
        requestAnimationFrame(() => {
            const content = this.contentElement;
            if (this.isOpened) {
                const scrollHeight = content.scrollHeight;
                content.style.maxHeight = `${scrollHeight}px`;
            }
            else {
                content.style.maxHeight = '0px';
            }
        });
    }
    render() {
        return (h("div", { key: 'b372cc0a27e1ff25e0e9dde30f0a4e4cdc48601a', class: "spw-accordion-content", ref: el => (this.contentElement = el), "data-accordion-id": this.el.getAttribute('data-accordion-id') }, h("div", { key: '79e9cd2d38ba392dc248c9ea991753f6c897d654', class: "spw-accordion-content__inner" }, h("slot", { key: '99e8bda5b6e72ef32c355b02fd33b7fd68ff6b44', onSlotchange: () => this.updateHeight() }))));
    }
    static get is() { return "spw-accordion-content"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["spw-accordion-content.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["spw-accordion-content.css"]
        };
    }
    static get states() {
        return {
            "isOpened": {}
        };
    }
    static get elementRef() { return "el"; }
    static get listeners() {
        return [{
                "name": "accordionToggle",
                "method": "handleAccordionToggle",
                "target": "document",
                "capture": false,
                "passive": false
            }];
    }
}
