'use strict';

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

const infoTileDateFormatCss = () => `*{box-sizing:border-box}:host(limebb-info-tile-date-format){display:grid;gap:0.5rem;grid-template-columns:1fr 1fr !important}limel-header{flex-wrap:wrap;grid-column:1/-1;overflow:hidden;border-radius:0.7rem;border:1px solid rgb(var(--contrast-100))}limel-header section{width:100%;padding:0.5rem;display:grid;gap:0.5rem;grid-template-columns:repeat(auto-fit, minmax(8rem, 1fr))}`;

const InfoTileAdminConfig = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.change = index.createEvent(this, "change");
        this.getOptionValue = (option) => option.value || undefined;
        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) }));
        };
        this.handleChangeHour12 = (event) => {
            event.stopPropagation();
            let value = JSON.parse(event.detail.value);
            if (value === null) {
                value = undefined;
            }
            this.change.emit(Object.assign(Object.assign({}, this.value), { options: Object.assign(Object.assign({}, this.value.options), { hour12: value }) }));
        };
    }
    render() {
        return [
            this.renderDate(),
            this.renderTime(),
            this.renderAffix('prefix'),
            this.renderAffix('suffix'),
        ];
    }
    renderDate() {
        return (index.h("limel-header", { icon: "calendar", heading: "Date settings" }, index.h("section", null, this.renderDay(), this.renderMonth(), this.renderYear(), this.renderWeekday())));
    }
    renderDay() {
        const options = [
            {
                value: '',
                text: '',
            },
            {
                value: '2-digit',
                text: '2 digit',
            },
            {
                value: 'numeric',
                text: 'Numeric',
            },
        ];
        const value = options.find((o) => { var _a; return o.value && o.value === ((_a = this.value.options) === null || _a === void 0 ? void 0 : _a.day); });
        return (index.h("limel-select", { label: "Day", options: options, value: value, onChange: this.handleChangeOptions('day', this.getOptionValue) }));
    }
    renderMonth() {
        const options = [
            {
                value: '',
                text: '',
            },
            {
                value: 'long',
                text: 'Long',
            },
            {
                value: 'narrow',
                text: 'Narrow',
            },
            {
                value: 'short',
                text: 'Short',
            },
            {
                value: '2-digit',
                text: '2 digit',
            },
            {
                value: 'numeric',
                text: 'Numeric',
            },
        ];
        const value = options.find((o) => { var _a; return o.value && o.value === ((_a = this.value.options) === null || _a === void 0 ? void 0 : _a.month); });
        return (index.h("limel-select", { label: "Month", options: options, value: value, onChange: this.handleChangeOptions('month', this.getOptionValue) }));
    }
    renderYear() {
        const options = [
            {
                value: '',
                text: '',
            },
            {
                value: '2-digit',
                text: '2 digit',
            },
            {
                value: 'numeric',
                text: 'Numeric',
            },
        ];
        const value = options.find((o) => { var _a; return o.value && o.value === ((_a = this.value.options) === null || _a === void 0 ? void 0 : _a.year); });
        return (index.h("limel-select", { label: "Year", options: options, value: value, onChange: this.handleChangeOptions('year', this.getOptionValue) }));
    }
    renderWeekday() {
        const options = [
            {
                value: '',
                text: '',
            },
            {
                value: 'long',
                text: 'Long',
            },
            {
                value: 'narrow',
                text: 'Narrow',
            },
            {
                value: 'short',
                text: 'Short',
            },
        ];
        const value = options.find((o) => { var _a; return o.value && o.value === ((_a = this.value.options) === null || _a === void 0 ? void 0 : _a.weekday); });
        return (index.h("limel-select", { label: "Weekday", options: options, value: value, onChange: this.handleChangeOptions('weekday', this.getOptionValue) }));
    }
    renderTime() {
        return (index.h("limel-header", { icon: "clock", heading: "Time settings" }, index.h("section", null, this.renderHour(), this.renderMinute(), this.renderSecond(), this.renderHour12())));
    }
    renderHour() {
        const options = [
            {
                value: '',
                text: '',
            },
            {
                value: '2-digit',
                text: '2 digit',
            },
            {
                value: 'numeric',
                text: 'Numeric',
            },
        ];
        const value = options.find((o) => { var _a; return o.value && o.value === ((_a = this.value.options) === null || _a === void 0 ? void 0 : _a.hour); });
        return (index.h("limel-select", { label: "Hour", options: options, value: value, onChange: this.handleChangeOptions('hour', this.getOptionValue) }));
    }
    renderMinute() {
        const options = [
            {
                value: '',
                text: '',
            },
            {
                value: '2-digit',
                text: '2 digit',
            },
            {
                value: 'numeric',
                text: 'Numeric',
            },
        ];
        const value = options.find((o) => { var _a; return o.value && o.value === ((_a = this.value.options) === null || _a === void 0 ? void 0 : _a.minute); });
        return (index.h("limel-select", { label: "Minute", options: options, value: value, onChange: this.handleChangeOptions('minute', this.getOptionValue) }));
    }
    renderSecond() {
        const options = [
            {
                value: '',
                text: '',
            },
            {
                value: '2-digit',
                text: '2 digit',
            },
            {
                value: 'numeric',
                text: 'Numeric',
            },
        ];
        const value = options.find((o) => { var _a; return o.value && o.value === ((_a = this.value.options) === null || _a === void 0 ? void 0 : _a.second); });
        return (index.h("limel-select", { label: "Second", options: options, value: value, onChange: this.handleChangeOptions('second', this.getOptionValue) }));
    }
    renderHour12() {
        const options = [
            {
                value: 'null',
                text: 'Default',
                secondaryText: 'Locale dependent',
            },
            {
                value: 'true',
                text: '12 hour',
            },
            {
                value: 'false',
                text: '24 hour',
            },
        ];
        const value = options.find((o) => {
            var _a, _b;
            if (o.value === String((_a = this.value.options) === null || _a === void 0 ? void 0 : _a.hour12)) {
                return true;
            }
            return (o.value === 'null' && ((_b = this.value.options) === null || _b === void 0 ? void 0 : _b.hour12) === undefined);
        });
        return (index.h("limel-select", { label: "Clock format", options: options, value: value, onChange: this.handleChangeHour12 }));
    }
    renderAffix(affix) {
        const options = [
            {
                text: 'Weekday',
                value: 'weekday',
            },
            {
                text: 'Day',
                value: 'day',
            },
            {
                text: 'Month',
                value: 'month',
            },
            {
                text: 'Year',
                value: 'year',
            },
            {
                text: 'Hour',
                value: 'hour',
            },
            {
                text: 'Minute',
                value: 'minute',
            },
            {
                text: 'Second',
                value: 'second',
            },
        ].map((option) => (Object.assign(Object.assign({}, option), { disabled: !Object.keys(this.value.options || {}).includes(option.value) })));
        const value = options.filter((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", { multiple: true, label: affix.charAt(0).toUpperCase() + affix.slice(1), options: options, value: value, onChange: this.handleChangeAffix(affix) }));
    }
};
InfoTileAdminConfig.style = infoTileDateFormatCss();

exports.limebb_info_tile_date_format = InfoTileAdminConfig;
