import { Host, h } from "@stencil/core";
import { cls } from "../../utils/helpers";
import { autoUpdate, computePosition, flip, offset, shift, size } from "@floating-ui/dom";
export class XInputSuggestion {
    constructor() {
        this.block = undefined;
        this.active = false;
    }
    /**
     * On element is mounted
     */
    componentDidLoad() {
        this.input = this.el.parentElement.querySelector(`input`);
        this.input && this.input.addEventListener('focus', this.onFocusInput.bind(this));
        this.input && this.input.addEventListener('blur', this.onBlurInput.bind(this));
    }
    /**
     * On element is destroyed
     */
    disconnectedCallback() {
        if (this.input) {
            this.input.removeEventListener('focus', this.onFocusInput);
            this.input.removeEventListener('blur', this.onBlurInput);
        }
    }
    /**
     * This is called on component did update the element space
     */
    computePositionCustomSelect() {
        computePosition(this.input.closest('x-input'), this.el, {
            placement: 'bottom-start',
            middleware: [size({
                    apply({ availableWidth, availableHeight, elements }) {
                        const items = elements;
                        items.floating.style.maxWidth = `${Math.max(200, availableWidth > items.reference.offsetWidth ? items.reference.offsetWidth : availableWidth)}px`;
                        items.floating.style.maxHeight = `${Math.max(200, availableHeight - 4)}px`;
                    }
                }), flip(), shift(), offset(4)],
        }).then(({ x, y }) => {
            this.el.style.left = `${x}px`;
            this.el.style.top = `${y}px`;
        });
    }
    /**
     * On focus the input container event
     */
    onFocusInput() {
        if (this.el.querySelectorAll('x-input-suggestion-item').length > 0) {
            this.active = true;
            this.cleanup = autoUpdate(this.input.closest('x-input'), this.el, this.computePositionCustomSelect.bind(this));
        }
    }
    /**
     * On blur the input container event
     */
    onBlurInput() {
        setTimeout(() => {
            this.active = false;
            this.cleanup();
        }, 100);
    }
    /**
     * Render the component
     */
    render() {
        return h(Host, { key: 'e6c4b8d8ebf6093e0a2ad5d4c0a6ad2fe1f4f576', class: cls({
                'active': this.active,
                'block': this.block,
            }) }, h("div", { key: '935bdba1c4959d6461d11e5069a7f1f668c524a3', class: "arrow" }), h("slot", { key: '2f99b7c8da7c191f613850e7c3e9ea2dee02c12e' }), h("div", { key: '9749c4c1c05a73194afa8bd25c85239611179c70', class: "suggestion-results" }, h("slot", { key: '98ca310ce4f59fa2d0a37b8fe1ea029940693d66', name: "results" })));
    }
    static get is() { return "x-input-suggestion"; }
    static get originalStyleUrls() {
        return {
            "$": ["./style.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["style.css"]
        };
    }
    static get properties() {
        return {
            "block": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Element is full size"
                },
                "attribute": "block",
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "active": {}
        };
    }
    static get elementRef() { return "el"; }
}
