import { Host, h } from "@stencil/core";
import { Icons } from "../../assets/icons/index.js";
export class CpslDropdown {
    constructor() {
        this.toggleDropdown = () => {
            this.isOpen = !this.isOpen;
        };
        this.selectItem = (item, emitEvent = true) => {
            this.selectedItem = item;
            this.isOpen = false;
            if (emitEvent) {
                this.selectedItemChange.emit(this.selectedItem);
            }
        };
        this.handleItemSelect = (item) => () => {
            this.selectItem(item);
        };
        this.handleSearchQueryChange = (event) => {
            const target = event.target;
            this.searchQuery = target.value;
            this.filteredItems = this.items.filter(item => item.label.toLowerCase().includes(this.searchQuery.toLowerCase()));
        };
        this.handleClickOutside = (event) => {
            if (this.isOpen && !this.el.contains(event.target)) {
                this.isOpen = false;
            }
        };
        this.width = '100%';
        this.hasCpslSearch = false;
        this.isOpen = false;
        this.searchQuery = '';
        this.filteredItems = [];
        this.items = [];
        this.selectedItem = null;
    }
    handleSelectedItemChange(newValue) {
        if (newValue !== null) {
            this.selectItem(newValue, false);
        }
    }
    handleOpenChange() {
        if (this.isOpen) {
            this.adjustPosition();
            this.addClickOutsideListener();
        }
        else {
            this.removeClickOutsideListener();
        }
    }
    handleResize() {
        if (this.isOpen) {
            this.adjustPosition();
        }
    }
    adjustPosition() {
        var _a;
        if (typeof window !== 'undefined') {
            const dropdownOptions = this.el.shadowRoot.querySelector('.dropdown-options');
            const parentRect = (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
            const searchBar = this.el.shadowRoot.querySelector('.search-bar');
            const viewportHeight = window.innerHeight;
            if (parentRect) {
                this.width = `${parentRect.width}px`;
                dropdownOptions.style.left = `${parentRect.x}px`;
                if (window.innerWidth <= 480) {
                    searchBar.style.maxHeight = `30px`;
                    dropdownOptions.style.top = `425px`;
                    dropdownOptions.style.maxHeight = '110px';
                    return;
                }
                dropdownOptions.style.top = `${parentRect.y + parentRect.height}px`;
                const availableHeight = viewportHeight - parentRect.bottom;
                dropdownOptions.style.maxHeight = `${availableHeight - 8}px`;
            }
        }
    }
    addClickOutsideListener() {
        typeof window !== 'undefined' && window.addEventListener('click', this.handleClickOutside);
    }
    removeClickOutsideListener() {
        typeof window !== 'undefined' && window.removeEventListener('click', this.handleClickOutside);
    }
    componentWillLoad() {
        if (this.items.length > 0) {
            this.filteredItems = [...this.items];
            if (this.selectedItem !== null) {
                this.selectItem(this.selectedItem, false);
            }
            else {
                this.selectedItem = this.items[0];
            }
        }
    }
    disconnectedCallback() {
        this.removeClickOutsideListener();
    }
    render() {
        var _a, _b, _c;
        return (h(Host, { key: '76f4d93f5c0d4fddca26a8d7dc381d8c9b22119c' }, h("button", { key: '7186e6bedbeac44d8bc8b95de5acafeea999d2f2', class: "dropdown-button", onClick: this.toggleDropdown }, `${((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.selectedLabel) || ((_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.label)} ${(_c = this.selectedItem) === null || _c === void 0 ? void 0 : _c.value}`, h("div", { key: 'b5ef03a1a7bf5b37aa35ee30ce6233d7b19dc33e', class: `chevron ${this.isOpen ? '' : 'closed'}`, innerHTML: Icons['chevronUp'] })), h("ul", { key: 'b0d9227ed1d360405a0294efbd4fe2a25926b7d2', class: { 'dropdown-options': true, 'open': this.isOpen }, style: { width: this.width } }, this.hasCpslSearch && (h("li", { key: '0a7100d5c60114bf63583a2d808a7cb677053346', class: "search-bar" }, h("input", { key: '098d19346facb88c51674db9005354da36079820', type: "text", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchQueryChange }))), this.filteredItems.map(item => (h("li", { onClick: this.handleItemSelect(item) }, h("span", { innerHTML: Icons[item.icon] }), item.label, " ", h("span", { class: "dropdown-value" }, item.value)))))));
    }
    static get is() { return "cpsl-dropdown"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["cpsl-dropdown.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["cpsl-dropdown.css"]
        };
    }
    static get properties() {
        return {
            "width": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Width of the dropdown"
                },
                "attribute": "width",
                "reflect": false,
                "defaultValue": "'100%'"
            },
            "hasCpslSearch": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Whether or not to include search capability"
                },
                "attribute": "has-cpsl-search",
                "reflect": false,
                "defaultValue": "false"
            },
            "items": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "Array<DropdownInputEventDetail>",
                    "resolved": "DropdownInputEventDetail[]",
                    "references": {
                        "Array": {
                            "location": "global",
                            "id": "global::Array"
                        },
                        "DropdownInputEventDetail": {
                            "location": "import",
                            "path": "./dropdown-interface.js",
                            "id": "src/components/cpsl-dropdown/dropdown-interface.ts::DropdownInputEventDetail"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Items to be presented in the dropdown"
                },
                "defaultValue": "[]"
            },
            "selectedItem": {
                "type": "unknown",
                "mutable": true,
                "complexType": {
                    "original": "DropdownInputEventDetail | null",
                    "resolved": "DropdownInputEventDetail",
                    "references": {
                        "DropdownInputEventDetail": {
                            "location": "import",
                            "path": "./dropdown-interface.js",
                            "id": "src/components/cpsl-dropdown/dropdown-interface.ts::DropdownInputEventDetail"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The selected item in the dropdown"
                },
                "defaultValue": "null"
            }
        };
    }
    static get states() {
        return {
            "isOpen": {},
            "searchQuery": {},
            "filteredItems": {}
        };
    }
    static get events() {
        return [{
                "method": "selectedItemChange",
                "name": "selectedItemChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Event emitted when the selected item changes"
                },
                "complexType": {
                    "original": "DropdownInputEventDetail",
                    "resolved": "DropdownInputEventDetail",
                    "references": {
                        "DropdownInputEventDetail": {
                            "location": "import",
                            "path": "./dropdown-interface.js",
                            "id": "src/components/cpsl-dropdown/dropdown-interface.ts::DropdownInputEventDetail"
                        }
                    }
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "selectedItem",
                "methodName": "handleSelectedItemChange"
            }, {
                "propName": "isOpen",
                "methodName": "handleOpenChange"
            }];
    }
    static get listeners() {
        return [{
                "name": "resize",
                "method": "handleResize",
                "target": "window",
                "capture": false,
                "passive": true
            }];
    }
}
//# sourceMappingURL=cpsl-dropdown.js.map
