'use strict';

var index = require('./index-C_OnxXhP.js');
var webComponentTemplate = require('./web-component-template-BWCutZB6.js');
var index_esm = require('./index.esm-C1i_NocP.js');
var get = require('./get-D1lIKhWp.js');
require('./_MapCache-DHOVMBKi.js');
require('./isSymbol-BJj6FNl6.js');

const componentConfigCss = () => `:host(*){--header-background-color:rgb(var(--contrast-600));display:flex;flex-direction:column;border:1px dashed rgb(var(--contrast-700));overflow:clip;border-radius:0.75rem;background-color:rgb(var(--contrast-500))}*{box-sizing:border-box}.label{margin-top:1rem;margin-bottom:1rem}.config-component{display:grid;column-gap:1rem;row-gap:1rem;margin:1rem;grid-template-columns:repeat(3, minmax(0, 1fr))}`;

const ComponentConfig = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.change = index.createEvent(this, "change");
        this.value = {};
        /**
         * If the value should be fetched from the commandbus or the web component registry
         */
        this.type = 'component';
        this.configViewType = 'code';
        this.findConfigComponent = (name) => {
            var _a, _b;
            if (this.type === 'component') {
                return (_a = this.registry.getAll().find((config) => config.name === name)) === null || _a === void 0 ? void 0 : _a.configComponent;
            }
            if (this.type === 'command') {
                return (_b = this.commandbus.getAll().find((config) => config.id === name)) === null || _b === void 0 ? void 0 : _b.configComponent;
            }
        };
        this.handleChangeMode = (event) => {
            event.stopPropagation();
            this.configViewType = event.detail.id;
        };
        this.handleCodeEditorChange = (event) => {
            event.stopPropagation();
            try {
                const value = JSON.parse(event.detail);
                this.change.emit(value);
            }
            catch (_a) {
                // Ignore invalid JSON
            }
        };
    }
    componentWillLoad() {
        this.configComponent = this.getComponentName();
    }
    componentShouldUpdate(_newValue, _oldValue, property) {
        return property !== 'formInfo';
    }
    watchFormInfo() {
        this.configComponent = this.getComponentName();
    }
    watchconfigComponent(newValue, oldValue) {
        if (newValue && !oldValue) {
            this.configViewType = 'config';
        }
        if (!newValue) {
            this.configViewType = 'code';
        }
    }
    getComponentName() {
        var _a, _b, _c;
        const section = (_b = (_a = this.formInfo) === null || _a === void 0 ? void 0 : _a.schemaPath.slice(0, -1)) !== null && _b !== void 0 ? _b : [];
        const path = [...section, this.getNameField()];
        const name = get.get((_c = this.formInfo) === null || _c === void 0 ? void 0 : _c.rootValue, path);
        const configComponent = this.findConfigComponent(name);
        if (configComponent && customElements.get(configComponent.name)) {
            return configComponent;
        }
    }
    render() {
        return [this.renderHeader(), this.renderContent()];
    }
    renderHeader() {
        let buttons = [];
        if (this.configComponent) {
            buttons = [
                {
                    id: 'config',
                    title: 'Config',
                    selected: this.configViewType === 'config',
                },
                {
                    id: 'code',
                    title: 'Code',
                    selected: this.configViewType === 'code',
                },
            ];
        }
        return (index.h("limel-header", { icon: "edit_property", heading: this.label, subheading: this.helperText }, index.h("limel-button-group", { slot: "actions", value: buttons, onChange: this.handleChangeMode })));
    }
    renderContent() {
        if (this.configViewType === 'config') {
            return this.renderConfigComponent();
        }
        return this.renderCodeEditor();
    }
    renderCodeEditor() {
        return (index.h("limel-code-editor", { value: JSON.stringify(this.value, null, '\t'), language: "json", readonly: this.readonly, lineNumbers: true, fold: true, lint: true, onChange: this.handleCodeEditorChange }));
    }
    renderConfigComponent() {
        var _a, _b;
        return (index.h(webComponentTemplate.LimeWebComponentTemplate, { class: "config-component", platform: this.platform, context: this.context,
            // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
            name: (_a = this.configComponent) === null || _a === void 0 ? void 0 : _a.name, props: Object.assign(Object.assign({}, (_b = this.configComponent) === null || _b === void 0 ? void 0 : _b.props), { value: this.value, required: this.required, readonly: this.readonly, disabled: this.disabled, label: this.label, helperText: this.helperText, formInfo: this.formInfo }) }));
    }
    getNameField() {
        if (this.nameField) {
            return this.nameField;
        }
        const fields = {
            component: 'name',
            command: 'id',
        };
        return fields[this.type];
    }
    get registry() {
        return this.platform.get(index_esm.n.WebComponentRegistry);
    }
    get commandbus() {
        return this.platform.get(index_esm.n.CommandBus);
    }
    static get watchers() { return {
        "formInfo": [{
                "watchFormInfo": 0
            }],
        "configComponent": [{
                "watchconfigComponent": 0
            }]
    }; }
};
ComponentConfig.style = componentConfigCss();

exports.limebb_component_config = ComponentConfig;
