import { h, Host } from "@stencil/core";
export class SpwAccordionItem {
    constructor() {
        this.isOpen = false;
        this.isMobile = window.innerWidth < 768;
        /** Définit si l'élément est ouvert ou pas */
        this.defaultOpen = false;
        /** Variant de l'accordion-item (propagé par le parent) */
        this.variant = 'default';
    }
    componentWillLoad() {
        this.isOpen = this.defaultOpen;
        this.assignItemId();
        this.setupResizeListener();
        this.toggleClasses();
    }
    componentDidLoad() {
        if (this.isOpen) {
            const itemId = this.el.getAttribute('data-accordion-id');
            this.accordionToggle.emit({ isOpen: this.isOpen, id: itemId });
            this.updateFocusableElements();
        }
    }
    disconnectedCallback() {
        this.teardownResizeListener();
    }
    defaultOpenChanged(newValue) {
        this.isOpen = newValue;
        this.toggleClasses();
        this.updateFocusableElements();
    }
    assignItemId() {
        const index = Array.from(this.el.parentNode.children).indexOf(this.el);
        this.el.setAttribute('data-accordion-id', `accordion-item-${index}`);
    }
    toggleContent() {
        this.isOpen = !this.isOpen;
        const itemId = this.el.getAttribute('data-accordion-id');
        this.accordionToggle.emit({ isOpen: this.isOpen, id: itemId });
        this.updateFocusableElements();
        if (!this.isOpen) {
            this.scrollToElement();
        }
        this.toggleClasses();
    }
    toggleClasses() {
        const contentElement = this.el.querySelector('spw-accordion-content');
        const titleElement = this.el.querySelector('spw-accordion-title');
        if (contentElement) {
            contentElement.classList.toggle('--collapsed', !this.isOpen);
        }
        if (titleElement) {
            titleElement.classList.toggle('--collapsed', !this.isOpen);
        }
    }
    handleClick(event) {
        event.preventDefault();
        this.toggleContent();
    }
    scrollToElement() {
        const element = this.el.shadowRoot.querySelector('.spw-accordion-item__content');
        if (element && this.isMobile) {
            element.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
    }
    updateFocusableElements() {
        const contentSlot = this.el.shadowRoot.querySelector('slot[name="content"]');
        if (!contentSlot) {
            return;
        }
        const assignedElements = contentSlot.assignedElements({ flatten: true });
        assignedElements.forEach(element => {
            const focusableElements = element.querySelectorAll('*');
            focusableElements.forEach(focusable => {
                if (this.isOpen) {
                    const originalTabIndex = focusable.getAttribute('data-tabindex-original');
                    if (originalTabIndex !== null) {
                        focusable.setAttribute('tabindex', originalTabIndex);
                        focusable.removeAttribute('data-tabindex-original');
                    }
                    else {
                        focusable.removeAttribute('tabindex');
                    }
                }
                else {
                    if (!focusable.hasAttribute('data-tabindex-original')) {
                        const currentTabIndex = focusable.getAttribute('tabindex');
                        if (currentTabIndex !== null) {
                            focusable.setAttribute('data-tabindex-original', currentTabIndex);
                        }
                        else {
                            focusable.setAttribute('data-tabindex-original', '');
                        }
                    }
                    focusable.setAttribute('tabindex', '-1');
                }
            });
        });
    }
    setupResizeListener() {
        this.resizeListener = () => {
            this.isMobile = window.innerWidth < 768;
        };
        window.addEventListener('resize', this.resizeListener);
    }
    teardownResizeListener() {
        if (this.resizeListener) {
            window.removeEventListener('resize', this.resizeListener);
        }
    }
    get elementClass() {
        return {
            'spw-accordion-item': true,
            'spw-accordion-item--collapsed': !this.isOpen,
            'spw-accordion-item--default': this.variant === 'default',
            'spw-accordion-item--separated': this.variant === 'separated',
        };
    }
    get elementChildClass() {
        return {
            'spw-accordion-item__trigger': true,
        };
    }
    render() {
        return (h(Host, { key: '78cb69dd988ee6d713e546e858e6ec2489e59135', class: this.elementClass }, h("div", { key: '7aba66cbccc64bfeba949786e36f97b2f8a3a6e5', class: "spw-accordion-item__content" }, h("a", { key: '42120d0a11a0f5d8672b9fc7b9e5943622d0d677', href: "#", class: this.elementChildClass, onClick: event => this.handleClick(event) }, h("slot", { key: '1a42bee7ccbd21f3f597449deb9e669f97dcde22', name: "title" })), h("slot", { key: '0e1a2f3cb7568f98c595eca5ed141bd27353e742', name: "content" }))));
    }
    static get is() { return "spw-accordion-item"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["spw-accordion-item.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["spw-accordion-item.css"]
        };
    }
    static get properties() {
        return {
            "defaultOpen": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "D\u00E9finit si l'\u00E9l\u00E9ment est ouvert ou pas"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "default-open",
                "defaultValue": "false"
            },
            "variant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'default' | 'separated'",
                    "resolved": "\"default\" | \"separated\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Variant de l'accordion-item (propag\u00E9 par le parent)"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "variant",
                "defaultValue": "'default'"
            }
        };
    }
    static get states() {
        return {
            "isOpen": {},
            "isMobile": {}
        };
    }
    static get events() {
        return [{
                "method": "accordionToggle",
                "name": "accordionToggle",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Transmet l'\u00E9tat actuel (isOpen) et l'id de l'\u00E9l\u00E9ment"
                },
                "complexType": {
                    "original": "{ isOpen: boolean; id: string }",
                    "resolved": "{ isOpen: boolean; id: string; }",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "defaultOpen",
                "methodName": "defaultOpenChanged"
            }];
    }
}
