'use strict';

var index = require('./index-C_OnxXhP.js');
var index_esm = require('./index.esm-C1i_NocP.js');

const componentPickerCss = () => `:host(limebb-component-picker){position:relative;display:flex;align-items:center}:host(limebb-component-picker) limel-picker{flex-grow:1;min-width:0}:host(limebb-component-picker) limel-icon-button{position:absolute;right:0.25rem}`;

const ComponentPicker = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.change = index.createEvent(this, "change");
        this.copy = index.createEvent(this, "copy");
        /**
         * The type of items to display in the picker
         */
        this.type = 'component';
        /**
         * The label for the copy button
         */
        this.copyLabel = 'Copy value';
        /**
         * Whether to hide the copy button
         */
        this.hideCopyButton = false;
        this.allItems = [];
        this.getConfigs = () => {
            const fields = {
                component: () => this.webComponentRegistry.getAll(),
                command: () => this.commandbus.getAll(),
            };
            return fields[this.type]();
        };
        this.getConfigValue = (config) => {
            if ('name' in config && typeof config.name === 'string') {
                return config.name;
            }
            if ('id' in config && typeof config.id === 'string') {
                return config.id;
            }
            return '';
        };
        this.hasTag = (config) => {
            if (!this.tags) {
                return true;
            }
            return this.tags.some((tag) => { var _a; return (_a = config.tags) === null || _a === void 0 ? void 0 : _a.includes(tag); });
        };
        this.handleBlur = () => {
            this.emitIfValidValue(this.currentInput);
        };
        this.handleChange = (event) => {
            var _a;
            event.stopPropagation();
            this.change.emit((_a = event.detail) === null || _a === void 0 ? void 0 : _a.value);
        };
        this.handleCopyButton = () => {
            navigator.clipboard.writeText(this.value);
            this.copy.emit(this.value);
        };
        this.handleKeyUp = (event) => {
            if (event.key !== 'Enter') {
                return;
            }
            this.emitIfValidValue(this.currentInput);
        };
        this.emitIfValidValue = (value) => {
            if (this.isValidIdentifier(value)) {
                this.change.emit(value);
            }
        };
        this.isValidIdentifier = (identifier) => {
            if (!identifier) {
                return false;
            }
            if (this.type === 'component') {
                return Boolean(customElements.get(identifier));
            }
            return this.allItems.some((item) => item.value === identifier);
        };
        this.renderPicker = () => {
            let value = this.allItems.find((item) => this.value === item.value);
            if (!value && this.value) {
                value = {
                    text: this.value,
                    value: this.value,
                    icon: {
                        name: 'question',
                        color: 'rgb(var(--color-glaucous-light))',
                    },
                };
            }
            return (index.h("limel-picker", { disabled: this.disabled, helperText: this.helperText, label: this.label, readonly: this.readonly, required: this.required, searcher: this.search, value: value, title: value === null || value === void 0 ? void 0 : value.text, onBlur: this.handleBlur, onChange: this.handleChange, onKeyUp: this.handleKeyUp }));
        };
        this.renderCopyButton = () => {
            if (this.hideCopyButton) {
                return;
            }
            return (index.h("limel-icon-button", { icon: "copy", disabled: !this.value, label: this.copyLabel, onClick: this.handleCopyButton }));
        };
        this.search = async (query) => {
            if (!query) {
                return this.allItems;
            }
            return this.allItems.filter(this.isItemMatching(query.toLocaleLowerCase()));
        };
        this.isItemMatching = (query) => (item) => {
            const queryParts = query.split(/\s+/);
            return queryParts.every((part) => {
                var _a, _b;
                return item.text.toLocaleLowerCase().includes(part) ||
                    ((_a = item.secondaryText) === null || _a === void 0 ? void 0 : _a.toLocaleLowerCase().includes(part)) ||
                    ((_b = item.value) === null || _b === void 0 ? void 0 : _b.toLocaleLowerCase().includes(part));
            });
        };
    }
    componentWillLoad() {
        this.allItems = this.getConfigs()
            .filter(this.hasTag)
            .map((config) => {
            var _a, _b;
            return ({
                value: this.getConfigValue(config),
                text: this.translator.get((_a = config.title) !== null && _a !== void 0 ? _a : this.getConfigValue(config)),
                secondaryText: this.translator.get((_b = config.description) !== null && _b !== void 0 ? _b : ''),
                icon: config.icon,
            });
        })
            .sort((a, b) => a.text.localeCompare(b.text));
    }
    render() {
        return [this.renderPicker(), this.renderCopyButton()];
    }
    get currentInput() {
        var _a, _b, _c, _d, _e, _f, _g;
        return ((_g = (_f = (_e = (_d = (_c = (_b = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('limel-picker')) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('limel-chip-set')) === null || _d === void 0 ? void 0 : _d.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector('input')) === null || _f === void 0 ? void 0 : _f.value) !== null && _g !== void 0 ? _g : '');
    }
    get webComponentRegistry() {
        return this.platform.get(index_esm.n.WebComponentRegistry);
    }
    get commandbus() {
        return this.platform.get(index_esm.n.CommandBus);
    }
    get translator() {
        return this.platform.get(index_esm.n.Translate);
    }
    get host() { return index.getElement(this); }
};
ComponentPicker.style = componentPickerCss();

exports.limebb_component_picker = ComponentPicker;
