import { h } from "@stencil/core";
/**
 * This component is responsible for rendering the configuration of the
 * _date_ and _time_ settings. It is used in CRM Building Blocks documentations,
 * but also by `limebb-info-tile-format`, to visualize these configurations in Lime Admin.
 *
 * @private
 */
export class InfoTileAdminConfig {
    constructor() {
        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 (h("limel-header", { icon: "calendar", heading: "Date settings" }, 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 (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 (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 (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 (h("limel-select", { label: "Weekday", options: options, value: value, onChange: this.handleChangeOptions('weekday', this.getOptionValue) }));
    }
    renderTime() {
        return (h("limel-header", { icon: "clock", heading: "Time settings" }, 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 (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 (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 (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 (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 (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-date-format"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["info-tile-date-format.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["info-tile-date-format.css"]
        };
    }
    static get properties() {
        return {
            "value": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "DateTimeFormat",
                    "resolved": "{ type: \"date\"; options?: Partial<DateTimeFormatOptions> | undefined; prefix?: (keyof DateTimeFormatPartTypesRegistry)[] | undefined; suffix?: (keyof DateTimeFormatPartTypesRegistry)[] | undefined; }",
                    "references": {
                        "DateTimeFormat": {
                            "location": "import",
                            "path": "..",
                            "id": "src/components/info-tile/format/index.ts::DateTimeFormat",
                            "referenceLocation": "DateTimeFormat"
                        }
                    }
                },
                "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": "DateTimeFormat",
                    "resolved": "{ type: \"date\"; options?: Partial<DateTimeFormatOptions> | undefined; prefix?: (keyof DateTimeFormatPartTypesRegistry)[] | undefined; suffix?: (keyof DateTimeFormatPartTypesRegistry)[] | undefined; }",
                    "references": {
                        "DateTimeFormat": {
                            "location": "import",
                            "path": "..",
                            "id": "src/components/info-tile/format/index.ts::DateTimeFormat",
                            "referenceLocation": "DateTimeFormat"
                        }
                    }
                }
            }];
    }
}
