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

/**
 * Single units sanctioned for use in ECMAScript
 *
 * @see https://tc39.es/ecma402/#table-sanctioned-single-unit-identifiers
 */
const units = [
    'acre',
    'bit',
    'byte',
    'celsius',
    'centimeter',
    'day',
    'degree',
    'fahrenheit',
    'fluid-ounce',
    'foot',
    'gallon',
    'gigabit',
    'gigabyte',
    'gram',
    'hectare',
    'hour',
    'inch',
    'kilobit',
    'kilobyte',
    'kilogram',
    'kilometer',
    'liter',
    'megabit',
    'megabyte',
    'meter',
    'microsecond',
    'mile',
    'mile-scandinavian',
    'milliliter',
    'millimeter',
    'millisecond',
    'minute',
    'month',
    'nanosecond',
    'ounce',
    'percent',
    'petabyte',
    'pound',
    'second',
    'stone',
    'terabit',
    'terabyte',
    'week',
    'yard',
    'year',
];

const InfoTileAdminConfig = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.change = createEvent(this, "change");
        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) }));
    }
};

export { InfoTileAdminConfig as limebb_info_tile_unit_format };
