'use strict';

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

const InfoTileAdminConfig = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.change = index.createEvent(this, "change");
        this.getOptionValue = (option) => option.value;
        this.getAffixValue = (option) => {
            if (!option.value) {
                return;
            }
            return [option.value];
        };
        this.handleChangeOptions = (property, getValue = (value) => value) => (event) => {
            event.stopPropagation();
            this.change.emit(Object.assign(Object.assign({}, this.value), { options: Object.assign(Object.assign({}, this.value.options), { [property]: getValue(event.detail) || undefined }) }));
        };
        this.handleChangeAffix = (property) => (event) => {
            event.stopPropagation();
            this.change.emit(Object.assign(Object.assign({}, this.value), { [property]: this.getAffixValue(event.detail) }));
        };
    }
    render() {
        return [
            this.renderNotation(),
            this.renderCompactDisplay(),
            this.renderAffix('prefix'),
            this.renderAffix('suffix'),
        ];
    }
    renderNotation() {
        const options = [
            {
                text: 'Standard',
                value: 'standard',
            },
            {
                text: 'Compact',
                value: 'compact',
            },
        ];
        const value = options.find((o) => { var _a; return o.value === ((_a = this.value.options) === null || _a === void 0 ? void 0 : _a.notation); });
        return (index.h("limel-select", { label: "Notation", helperText: "The formatting that should be displayed for the number", options: options, value: value, onChange: this.handleChangeOptions('notation', this.getOptionValue) }));
    }
    renderCompactDisplay() {
        const options = [
            {
                text: 'Short',
                value: 'short',
            },
            {
                text: 'Long',
                value: 'long',
            },
        ];
        const value = options.find((o) => { var _a; return o.value === ((_a = this.value.options) === null || _a === void 0 ? void 0 : _a.compactDisplay); });
        return (index.h("limel-select", { label: "Compact display", options: options, value: value, onChange: this.handleChangeOptions('compactDisplay', this.getOptionValue) }));
    }
    renderAffix(affix) {
        const options = [
            {
                text: '',
                value: '',
            },
            {
                text: 'Compact notation',
                value: 'compact',
            },
        ];
        const value = options.find((o) => { var _a; return o.value && ((_a = this.value[affix]) === null || _a === void 0 ? void 0 : _a.includes(o.value)); });
        return (index.h("limel-select", { label: affix.charAt(0).toUpperCase() + affix.slice(1), options: options, value: value, onChange: this.handleChangeAffix(affix) }));
    }
};

exports.limebb_info_tile_decimal_format = InfoTileAdminConfig;
