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: '8678d2c0e53ce5b4cf901044ae19c8d7e3f3337f', class: cls({
                'active': this.active,
                'block': this.block,
            }) }, h("div", { key: '28ec423a1641414bcea941585211208cd9ed0495', class: "arrow" }), h("slot", { key: 'a32c0d2dd81a83693561c7fea52ae4e4f20fc380' }), h("div", { key: 'fefa401e2502d6a0dcfa8eb805eb654875a7f35b', class: "suggestion-results" }, h("slot", { key: '23e2a6df067d3e10f3e62be25e6369c3b2e85ad6', 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"; }
}
