/*!
 * Built by ShiftSoftware
 * Copyright (c)
 */
import { h } from "@stencil/core";
import cn from "../../global/lib/cn";
import { parentsWithTag } from "../../global/lib/parents-with-tag";
export class FlexibleContainer {
    constructor() {
        this.isOpened = true;
        this.stopAnimation = false;
        this.height = 'auto';
        this.onlyForMounting = false;
        this.stopWorking = false;
        this.childrenAnimatingList = [];
        this.startTransition = (staticHeight) => {
            if (staticHeight !== -1) {
                const parents = parentsWithTag(this.el, 'flexible-container');
                parents.forEach(parent => {
                    parent.isOpened && parent.addChildrenAnimation(this);
                });
                clearTimeout(this.animationTimeoutRef);
                this.animationTimeoutRef = setTimeout(() => {
                    parents.forEach(parent => {
                        parent.onAnimationPlayChanges(false);
                        parent.removeChildrenAnimation(this);
                    });
                }, 510);
            }
            if (!this.isOpened) {
                this.container.style.height = '0px';
                this.container.style.opacity = '0.1';
                return;
            }
            this.container.style.opacity = '1';
            if (staticHeight && staticHeight !== -1)
                return (this.container.style.height = `${staticHeight}px`);
            if (this.height !== 'auto')
                return;
            else
                this.container.style.height = `${this.content.clientHeight}px`;
        };
        this.handleChildUpdates = (staticHeight) => {
            clearTimeout(this.ChildUpdatesActionTimeout);
            this.ChildUpdatesActionTimeout = setTimeout(() => {
                this.startTransition(staticHeight);
                setTimeout(() => {
                    if (this.isOpened && this.onlyForMounting)
                        this.stopWorking = true;
                }, 600);
            }, 50);
        };
    }
    async componentDidLoad() {
        this.container = this.el.querySelector('.flexible-container');
        this.content = this.el.querySelector('.flexible-container-content');
        const mustUpdate = () => this.isOpened && this.handleChildUpdates();
        this.mutationObserver = new MutationObserver(mustUpdate);
        this.mutationObserver.observe(this.content, {
            subtree: true,
            childList: true,
            attributes: true,
            characterData: true,
            attributeOldValue: true,
            characterDataOldValue: true,
        });
        this.resizeListener = mustUpdate;
        window.addEventListener('resize', this.resizeListener);
        if (this.isOpened)
            setTimeout(() => {
                this.startTransition();
            }, 200);
    }
    async disconnectedCallback() {
        if (this.mutationObserver)
            this.mutationObserver.disconnect();
        if (this.resizeListener)
            window.removeEventListener('resize', this.resizeListener);
    }
    async handleOpenChanges() {
        this.handleChildUpdates();
    }
    async handleHeightChanges(newHeight) {
        if (newHeight === 'auto')
            this.handleChildUpdates();
        else if (typeof newHeight === 'number')
            this.handleChildUpdates(newHeight);
    }
    async onAnimationPlayChanges(isAnimationStopped) {
        if (!isAnimationStopped)
            this.container.style.height = `${this.content.clientHeight}px`;
    }
    async addChildrenAnimation(child) {
        this.childrenAnimatingList = [...this.childrenAnimatingList, child];
    }
    async removeChildrenAnimation(child) {
        this.childrenAnimatingList = this.childrenAnimatingList.filter(x => x !== child);
    }
    render() {
        if (!this.initialStyle)
            this.initialStyle = !this.isOpened ? { height: '0px' } : { height: 'auto' };
        return (h("div", { key: 'a5dd8e8e1686115cab199d1940625941ca5b17b5', style: this.initialStyle, class: cn('flexible-container duration-500 w-full min-w-full', {
                'transition-all overflow-hidden !duration-500': !this.stopWorking,
                '!h-auto !duration-0 !transition-none': this.stopWorking || this.stopAnimation || !!this.childrenAnimatingList.length,
            }, this.containerClasses) }, h("div", { key: '3a3e9b4ad1f69a7e26f40ee8647bcea68923c493', class: cn('flexible-container-content', this.classes) }, h("slot", { key: 'e0fdc224e102e6bc038251df6695b76967846b2f' }))));
    }
    static get is() { return "flexible-container"; }
    static get originalStyleUrls() {
        return {
            "$": ["flexible-container.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["flexible-container.css"]
        };
    }
    static get properties() {
        return {
            "classes": {
                "type": "string",
                "attribute": "classes",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "containerClasses": {
                "type": "string",
                "attribute": "container-classes",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "isOpened": {
                "type": "boolean",
                "attribute": "is-opened",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "true"
            },
            "stopAnimation": {
                "type": "boolean",
                "attribute": "stop-animation",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "height": {
                "type": "any",
                "attribute": "height",
                "mutable": false,
                "complexType": {
                    "original": "number | 'auto'",
                    "resolved": "\"auto\" | number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'auto'"
            },
            "onlyForMounting": {
                "type": "boolean",
                "attribute": "only-for-mounting",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "stopWorking": {},
            "childrenAnimatingList": {}
        };
    }
    static get methods() {
        return {
            "onAnimationPlayChanges": {
                "complexType": {
                    "signature": "(isAnimationStopped: boolean) => Promise<void>",
                    "parameters": [{
                            "name": "isAnimationStopped",
                            "type": "boolean",
                            "docs": ""
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "",
                    "tags": []
                }
            },
            "addChildrenAnimation": {
                "complexType": {
                    "signature": "(child: FlexibleContainer) => Promise<void>",
                    "parameters": [{
                            "name": "child",
                            "type": "FlexibleContainer",
                            "docs": ""
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "FlexibleContainer": {
                            "location": "global",
                            "id": "global::FlexibleContainer"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "",
                    "tags": []
                }
            },
            "removeChildrenAnimation": {
                "complexType": {
                    "signature": "(child: FlexibleContainer) => Promise<void>",
                    "parameters": [{
                            "name": "child",
                            "type": "FlexibleContainer",
                            "docs": ""
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "FlexibleContainer": {
                            "location": "global",
                            "id": "global::FlexibleContainer"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "isOpened",
                "methodName": "handleOpenChanges"
            }, {
                "propName": "height",
                "methodName": "handleHeightChanges"
            }, {
                "propName": "stopAnimation",
                "methodName": "onAnimationPlayChanges"
            }];
    }
}
