import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BIwHMk6j.js';
import { a as ESCAPE } from './keycodes-CwMJvF_Z.js';

const textEditorPickerCss = () => `:host(limebb-text-editor-picker){animation:fade-in 0.3s ease forwards;animation-delay:0.1s;display:block;max-width:calc(100vw - 2rem);padding:0.125rem;border-radius:0.5rem;background-color:rgba(var(--contrast-100));box-shadow:var(--shadow-depth-16);max-height:50vh;overflow-y:auto}limel-menu-list{position:relative}limel-spinner{margin:0 auto}.spinner-in-list{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}`;

const TextEditorPicker = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.cancel = createEvent(this, "cancel");
        this.itemSelected = createEvent(this, "itemSelected");
        /**
         * List of items to display
         */
        this.items = [];
        /**
         * Open state  of the item's list
         */
        this.open = false;
        /**
         * Loading state of the item's list
         */
        this.isSearching = false;
        this.emptyMessage = '';
        this.handleCancel = (event) => {
            if (event instanceof KeyboardEvent && event.key !== ESCAPE) {
                return;
            }
            event.stopPropagation();
            event.preventDefault();
            this.cancel.emit();
        };
        this.selectOnInteract = (event) => {
            event.stopPropagation();
            event.preventDefault();
            this.itemSelected.emit(event.detail);
        };
    }
    watchOpen(newValue) {
        if (newValue === true) {
            this.setupHandlers();
        }
        else if (newValue === false) {
            this.teardownHandlers();
        }
    }
    connectedCallback() {
        if (this.open) {
            this.setupHandlers();
        }
    }
    disconnectedCallback() {
        this.teardownHandlers();
    }
    setupHandlers() {
        this.host.addEventListener('keyup', this.handleCancel);
    }
    teardownHandlers() {
        if (this.host) {
            this.host.removeEventListener('keyup', this.handleCancel);
        }
    }
    render() {
        if (this.items.length === 0) {
            if (this.isSearching) {
                return this.renderSpinner();
            }
            return (h(Host, { onMouseDown: this.handleMouseDown }, h("limebb-empty-state", { value: this.emptyMessage, icon: {
                    name: 'search_more',
                    color: 'rgb(var(--contrast-800))',
                } })));
        }
        return (h(Host, { onMouseDown: this.handleMouseDown }, [
            h("div", null, h("limel-list", { type: "selectable", items: this.getItems(), onInteract: this.selectOnInteract }), h("div", { class: "spinner-in-list" }, this.renderSpinner())),
        ]));
    }
    renderSpinner() {
        if (this.isSearching) {
            return h("limel-spinner", { size: "small", class: "search-spinner" });
        }
    }
    handleMouseDown(event) {
        event.preventDefault();
    }
    getItems() {
        return this.items.map((item) => {
            if ('separator' in item) {
                return item;
            }
            return Object.assign(Object.assign({}, item), { disabled: item.disabled || this.isSearching });
        });
    }
    get host() { return getElement(this); }
    static get watchers() { return {
        "open": [{
                "watchOpen": 0
            }]
    }; }
};
TextEditorPicker.style = textEditorPickerCss();

export { TextEditorPicker as limebb_text_editor_picker };
