import { Host } from "@stencil/core";
import { createPopper } from "@popperjs/core";
import { h } from "@stencil/core";
import { renderedTextWidth } from "../../../utils/utils";
const DropdownArrow = `<svg height="20" width="20" viewBox="0 0 20 20" aria-hidden="true" focusable="false" class="css-8mmkcg"><path d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"></path></svg>`;
/**
 * Display a drop-down menu of quick filter options.
 *
 * ```ts
 * <verdocs-quick-filter options={[...options]} value={1} label="Filter" placeholder="All" />
 * ```
 */
export class VerdocsQuickFilter {
    constructor() {
        /**
         * The menu options to display.
         */
        this.options = [];
        this.label = 'Filter';
        this.value = '';
        this.placeholder = 'Select...';
        // We need to do this to reliably disconnect the click-away listener
        this.clickListenerSymbol = new AbortController();
    }
    componentDidLoad() {
        this.popper = createPopper(this.dropdownButton, this.dropdownMenu, { placement: 'bottom-start', modifiers: [{ name: 'offset', options: { offset: [-1, 14] } }] });
        window.addEventListener('click', this.clickListener.bind(this), { signal: this.clickListenerSymbol.signal });
    }
    disconnectedCallback() {
        this.clickListenerSymbol.abort();
    }
    clickListener(e) {
        const outside = !(e.target == this.el || this.el.contains(e.target));
        if (outside) {
            this.hide();
        }
    }
    handleSelectOption(e, option) {
        e.stopPropagation();
        this.optionSelected.emit(option);
        this.value = option.value;
        this.hide();
    }
    // See https://popper.js.org/docs/v2/tutorial/
    // What we're doing here is clearing event listeners when they aren't needed, to increase performance in lists
    showDropdown() {
        var _a, _b;
        this.open = true;
        this.dropdownMenu.setAttribute('data-show', '');
        this.dropdownMenu.removeAttribute('aria-hidden');
        (_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions(options => ({
            ...options,
            modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }],
        })).catch(() => { });
        (_b = this.popper) === null || _b === void 0 ? void 0 : _b.update().catch(() => { });
    }
    handleHideDropdown(e) {
        var _a, _b;
        if (((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.localName) === 'button' && ((_b = e === null || e === void 0 ? void 0 : e.target) === null || _b === void 0 ? void 0 : _b.className) === 'arrow') {
            // This event is fired when a menu element is clicked because the button "loses focus" then too
            return;
        }
        this.hide();
    }
    toggleDropdown(e) {
        e.stopPropagation();
        if (this.open) {
            this.hide();
        }
        else {
            this.showDropdown();
        }
    }
    hide() {
        var _a;
        this.open = false;
        this.dropdownMenu.removeAttribute('data-show');
        this.dropdownMenu.setAttribute('aria-hidden', 'true');
        (_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions(options => ({
            ...options,
            modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }],
        })).catch(() => { });
    }
    render() {
        var _a, _b, _c;
        const selectedOption = (_a = this.options) === null || _a === void 0 ? void 0 : _a.find(option => option.value === this.value);
        const longestOption = (_b = this.options) === null || _b === void 0 ? void 0 : _b.reduce((prev, curr) => (prev.label.length > curr.label.length ? prev : curr));
        const longestLabelWidth = renderedTextWidth((longestOption === null || longestOption === void 0 ? void 0 : longestOption.label) || 'FILLER', '14px Inter, Barlow, sans-serif');
        const prefixWidth = renderedTextWidth(this.label, '14px Inter, Barlow, sans-serif');
        const minWidth = `${longestLabelWidth + prefixWidth + 40}px`;
        return (h(Host, { key: '2775a9460418249e5830b3acc29bc501dfc0b7e9', class: { open: !!this.open }, style: { minWidth, display: 'inline-block' } }, h("div", { key: 'a0d32bee5bf3a83860d1ee34b70dd08e14ff6f5a', class: "control", onClick: e => this.toggleDropdown(e), onBlur: e => this.handleHideDropdown(e) }, h("div", { key: 'e28fc8c51bd4913814770bfa3eed9aec685fcdc7', class: "title", ref: el => (this.dropdownButton = el) }, h("span", { key: '56f45a29290ed821c2260b07e34c76ad6f4b3008', class: "prefix" }, this.label, ":"), selectedOption ? selectedOption.label : this.placeholder), h("div", { key: 'dcc1f197621169c83f7c935bb06f60f992ac3a58', style: { flex: '1' } }), h("div", { key: '059cede12c8b2c1bca6b53f7e1f01b424dd70882', class: "separator" }), h("div", { key: '722b64600dca7b946044a60700b042d61774dabb', class: "arrow", innerHTML: DropdownArrow, "aria-label": "Open Menu" })), h("div", { key: '3988d0fd9076c4bc1bfb9d45d67f9354022a15cd', class: "items", "aria-hidden": !this.open, ref: el => (this.dropdownMenu = el), style: { minWidth } }, (_c = this.options) === null || _c === void 0 ? void 0 : _c.map(option => option.label ? (h("button", { onClick: e => this.handleSelectOption(e, option), class: `option ${option.value === this.value ? 'selected' : ''}`, disabled: option.disabled }, option.label)) : (h("div", { class: "separator" }))))));
    }
    static get is() { return "verdocs-quick-filter"; }
    static get originalStyleUrls() {
        return {
            "$": ["verdocs-quick-filter.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["verdocs-quick-filter.css"]
        };
    }
    static get properties() {
        return {
            "options": {
                "type": "unknown",
                "attribute": "options",
                "mutable": false,
                "complexType": {
                    "original": "IFilterOption[]",
                    "resolved": "IFilterOption[]",
                    "references": {
                        "IFilterOption": {
                            "location": "local",
                            "path": "/Users/chad/projects/verdocs/web-sdk/verdocs-web-sdk/src/components/controls/verdocs-quick-filter/verdocs-quick-filter.tsx",
                            "id": "src/components/controls/verdocs-quick-filter/verdocs-quick-filter.tsx::IFilterOption"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The menu options to display."
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[]"
            },
            "label": {
                "type": "string",
                "attribute": "label",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'Filter'"
            },
            "value": {
                "type": "string",
                "attribute": "value",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "defaultValue": "''"
            },
            "placeholder": {
                "type": "string",
                "attribute": "placeholder",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'Select...'"
            }
        };
    }
    static get states() {
        return {
            "open": {}
        };
    }
    static get events() {
        return [{
                "method": "optionSelected",
                "name": "optionSelected",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Event fired when a menu option is clicked.\nWeb Component events need to be \"composed\" to cross the Shadow DOM and be received by parent frameworks."
                },
                "complexType": {
                    "original": "IFilterOption",
                    "resolved": "IFilterOption",
                    "references": {
                        "IFilterOption": {
                            "location": "local",
                            "path": "/Users/chad/projects/verdocs/web-sdk/verdocs-web-sdk/src/components/controls/verdocs-quick-filter/verdocs-quick-filter.tsx",
                            "id": "src/components/controls/verdocs-quick-filter/verdocs-quick-filter.tsx::IFilterOption"
                        }
                    }
                }
            }];
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=verdocs-quick-filter.js.map
