import { r as registerInstance, c as createEvent, h } from './index-BIwHMk6j.js';

const infoTileFormatCss = () => `:host(limebb-info-tile-format){display:grid;gap:1rem}limel-button-group{grid-column:1/-1}.format{display:grid;gap:0.5rem;grid-template-columns:repeat(auto-fit, minmax(8rem, 1fr))}`;

const InfoTileAdminConfig = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.change = createEvent(this, "change");
        this.handleChangeType = (event) => {
            event.stopPropagation();
            const id = event.detail.id;
            if (id === 'none') {
                this.change.emit();
            }
            else if (id === 'date' || id === 'relative-date') {
                this.change.emit({
                    type: id,
                });
            }
            else if (id === 'percent') {
                this.change.emit({
                    type: 'number',
                    options: {
                        style: 'percent',
                    },
                    suffix: ['percentSign'],
                });
            }
            else {
                this.change.emit({
                    type: 'number',
                    options: {
                        style: id,
                    },
                });
            }
        };
        this.isValidButton = (button) => {
            if (!this.type) {
                return true;
            }
            if (button.id === 'none') {
                return true;
            }
            if (this.type === 'none') {
                return false;
            }
            if (this.type === 'date') {
                return button.id.includes('date');
            }
            return !button.id.includes('date');
        };
    }
    render() {
        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
        const buttons = [
            { id: 'none', title: 'No formatting', selected: !((_a = this.value) === null || _a === void 0 ? void 0 : _a.type) },
            {
                id: 'currency',
                title: 'Currency',
                selected: ((_b = this.value) === null || _b === void 0 ? void 0 : _b.type) === 'number' &&
                    ((_c = this.value.options) === null || _c === void 0 ? void 0 : _c.style) === 'currency',
            },
            {
                id: 'decimal',
                title: 'Decimal',
                selected: ((_d = this.value) === null || _d === void 0 ? void 0 : _d.type) === 'number' &&
                    ((_e = this.value.options) === null || _e === void 0 ? void 0 : _e.style) === 'decimal',
            },
            {
                id: 'percent',
                title: 'Percent',
                selected: ((_f = this.value) === null || _f === void 0 ? void 0 : _f.type) === 'number' &&
                    ((_g = this.value.options) === null || _g === void 0 ? void 0 : _g.style) === 'percent',
            },
            {
                id: 'unit',
                title: 'Unit',
                selected: ((_h = this.value) === null || _h === void 0 ? void 0 : _h.type) === 'number' &&
                    ((_j = this.value.options) === null || _j === void 0 ? void 0 : _j.style) === 'unit',
            },
            {
                id: 'date',
                title: 'Date',
                selected: ((_k = this.value) === null || _k === void 0 ? void 0 : _k.type) === 'date',
            },
            {
                id: 'relative-date',
                title: 'Relative date',
                selected: ((_l = this.value) === null || _l === void 0 ? void 0 : _l.type) === 'relative-date',
            },
        ];
        return [
            h("limel-button-group", { key: '142f19b2441e11b3d1ad151edb9603f7656e10be', value: buttons.filter(this.isValidButton), onChange: this.handleChangeType }),
            this.renderFormatConfig(),
        ];
    }
    renderFormatConfig() {
        var _a, _b;
        if (!((_a = this.value) === null || _a === void 0 ? void 0 : _a.type)) {
            return;
        }
        let type = this.value.type;
        if (this.isNumberFormat(this.value)) {
            // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
            type = (_b = this.value.options) === null || _b === void 0 ? void 0 : _b.style;
        }
        const ComponentName = `limebb-info-tile-${type}-format`;
        if (!customElements.get(ComponentName)) {
            return;
        }
        return (h(ComponentName, { platform: this.platform, context: this.context, class: "format", value: this.value }));
    }
    isNumberFormat(format) {
        return (format === null || format === void 0 ? void 0 : format.type) === 'number';
    }
};
InfoTileAdminConfig.style = infoTileFormatCss();

export { InfoTileAdminConfig as limebb_info_tile_format };
