import { h } from "@stencil/core";
import { units } from "./units";
/**
 * @private
 */
export class InfoTileAdminConfig {
    constructor() {
        this.getOptionValue = (option) => option.value;
        this.getAffixValue = (options) => {
            if (options.length === 0) {
                return;
            }
            return options.map((o) => o.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.renderUnit(),
            this.renderUnitDisplay(),
            this.renderCompactDisplay(),
            this.renderAffix('prefix'),
            this.renderAffix('suffix'),
        ];
    }
    renderUnit() {
        const options = units
            .map((unit) => ({
            value: unit,
            text: this.getUnitName(unit),
        }))
            .filter((option) => option.text);
        const value = options.find((o) => { var _a; return o.value === ((_a = this.value.options) === null || _a === void 0 ? void 0 : _a.unit); });
        return (h("limel-select", { label: "Unit", options: options, value: value, onChange: this.handleChangeOptions('unit', this.getOptionValue) }));
    }
    getUnitName(unit) {
        var _a, _b;
        const formatter = Intl.NumberFormat('en', {
            style: 'unit',
            unit: unit,
            unitDisplay: 'long',
        });
        return ((_b = (_a = formatter.formatToParts(1).find((part) => part.type === 'unit')) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '');
    }
    renderUnitDisplay() {
        const options = [
            {
                value: 'short',
                text: 'Short',
            },
            {
                value: 'long',
                text: 'Long',
            },
        ];
        const value = options.find((o) => { var _a; return o.value === ((_a = this.value.options) === null || _a === void 0 ? void 0 : _a.unitDisplay); });
        return (h("limel-select", { label: "Unit display", helperText: "The unit formatting style to use in unit formatting", options: options, value: value, onChange: this.handleChangeOptions('unitDisplay', this.getOptionValue) }));
    }
    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 (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 (h("limel-select", { label: "Compact display", options: options, value: value, onChange: this.handleChangeOptions('compactDisplay', this.getOptionValue) }));
    }
    renderAffix(affix) {
        const options = [
            {
                text: 'Compact notation',
                value: 'compact',
            },
            {
                text: 'Unit',
                value: 'unit',
            },
        ];
        const value = options.filter((o) => { var _a; return (_a = this.value[affix]) === null || _a === void 0 ? void 0 : _a.includes(o.value); });
        return (h("limel-select", { multiple: true, label: affix.charAt(0).toUpperCase() + affix.slice(1), options: options, value: value, onChange: this.handleChangeAffix(affix) }));
    }
    static get is() { return "limebb-info-tile-unit-format"; }
    static get encapsulation() { return "shadow"; }
    static get properties() {
        return {
            "value": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "NumberFormat",
                    "resolved": "{ type: \"number\"; options?: NumberFormatOptions | undefined; prefix?: (keyof NumberFormatPartTypeRegistry)[] | undefined; suffix?: (keyof NumberFormatPartTypeRegistry)[] | undefined; }",
                    "references": {
                        "NumberFormat": {
                            "location": "import",
                            "path": "..",
                            "id": "src/components/info-tile/format/index.ts::NumberFormat",
                            "referenceLocation": "NumberFormat"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The value of the current property"
                },
                "getter": false,
                "setter": false
            }
        };
    }
    static get events() {
        return [{
                "method": "change",
                "name": "change",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "The event to emit when the value of the current property has changed"
                },
                "complexType": {
                    "original": "NumberFormat",
                    "resolved": "{ type: \"number\"; options?: NumberFormatOptions | undefined; prefix?: (keyof NumberFormatPartTypeRegistry)[] | undefined; suffix?: (keyof NumberFormatPartTypeRegistry)[] | undefined; }",
                    "references": {
                        "NumberFormat": {
                            "location": "import",
                            "path": "..",
                            "id": "src/components/info-tile/format/index.ts::NumberFormat",
                            "referenceLocation": "NumberFormat"
                        }
                    }
                }
            }];
    }
}
