import { __decorate } from "tslib";
import { DesignSystem } from '@ni/fast-foundation';
import { attr } from '@ni/fast-element';
import { styles } from '../base/styles';
import { template } from '../base/template';
import { TableColumnTextBase, mixinTextBase } from '../text-base';
import { TableColumnSortOperation } from '../base/types';
import { tableColumnDateTextGroupHeaderViewTag } from './group-header-view';
import { tableColumnDateTextCellViewTag } from './cell-view';
import { DateTextFormat } from './types';
import { TableColumnDateTextValidator } from './models/table-column-date-text-validator';
import { lang } from '../../theme-provider';
import { optionalBooleanConverter } from '../../utilities/models/converter';
/**
 * The table column for displaying dates/times as text.
 */
export class TableColumnDateText extends mixinTextBase((TableColumnTextBase)) {
    constructor() {
        super(...arguments);
        this.langSubscriber = {
            handleChange: () => {
                this.updateColumnConfig();
            }
        };
    }
    connectedCallback() {
        super.connectedCallback();
        lang.subscribe(this.langSubscriber, this);
        this.updateColumnConfig();
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        lang.unsubscribe(this.langSubscriber, this);
    }
    placeholderChanged() {
        this.updateColumnConfig();
    }
    getColumnInternalsOptions() {
        return {
            cellRecordFieldNames: ['value'],
            cellViewTag: tableColumnDateTextCellViewTag,
            groupHeaderViewTag: tableColumnDateTextGroupHeaderViewTag,
            delegatedEvents: [],
            sortOperation: TableColumnSortOperation.basic,
            validator: new TableColumnDateTextValidator()
        };
    }
    formatChanged() {
        this.updateColumnConfig();
    }
    customLocaleMatcherChanged() {
        this.updateColumnConfig();
    }
    customWeekdayChanged() {
        this.updateColumnConfig();
    }
    customEraChanged() {
        this.updateColumnConfig();
    }
    customYearChanged() {
        this.updateColumnConfig();
    }
    customMonthChanged() {
        this.updateColumnConfig();
    }
    customDayChanged() {
        this.updateColumnConfig();
    }
    customHourChanged() {
        this.updateColumnConfig();
    }
    customMinuteChanged() {
        this.updateColumnConfig();
    }
    customSecondChanged() {
        this.updateColumnConfig();
    }
    customTimeZoneNameChanged() {
        this.updateColumnConfig();
    }
    customFormatMatcherChanged() {
        this.updateColumnConfig();
    }
    customHour12Changed() {
        this.updateColumnConfig();
    }
    customTimeZoneChanged() {
        this.updateColumnConfig();
    }
    customCalendarChanged() {
        this.updateColumnConfig();
    }
    customDayPeriodChanged() {
        this.updateColumnConfig();
    }
    customNumberingSystemChanged() {
        this.updateColumnConfig();
    }
    customDateStyleChanged() {
        this.updateColumnConfig();
    }
    customTimeStyleChanged() {
        this.updateColumnConfig();
    }
    customHourCycleChanged() {
        this.updateColumnConfig();
    }
    updateColumnConfig() {
        const formatter = this.createFormatter();
        if (formatter) {
            const columnConfig = {
                formatter,
                placeholder: this.placeholder
            };
            this.columnInternals.columnConfig = columnConfig;
            this.columnInternals.validator.setCustomOptionsValidity(true);
        }
        else {
            this.columnInternals.columnConfig = undefined;
            this.columnInternals.validator.setCustomOptionsValidity(false);
        }
    }
    createFormatter() {
        let options;
        if (this.format === DateTextFormat.default) {
            options = {
                dateStyle: 'medium',
                timeStyle: 'medium'
            };
        }
        else {
            options = this.getCustomFormattingOptions();
        }
        try {
            return new Intl.DateTimeFormat(lang.getValueFor(this), options);
        }
        catch (_e) {
            return undefined;
        }
    }
    getCustomFormattingOptions() {
        // There's a FAST bug (https://github.com/microsoft/fast/issues/6630) where removing
        // attributes sets their values to null instead of undefined. To work around this,
        // translate null values to undefined.
        const options = {
            localeMatcher: this.customLocaleMatcher ?? undefined,
            weekday: this.customWeekday ?? undefined,
            era: this.customEra ?? undefined,
            year: this.customYear ?? undefined,
            month: this.customMonth ?? undefined,
            day: this.customDay ?? undefined,
            hour: this.customHour ?? undefined,
            minute: this.customMinute ?? undefined,
            second: this.customSecond ?? undefined,
            timeZoneName: this.customTimeZoneName ?? undefined,
            formatMatcher: this.customFormatMatcher ?? undefined,
            hour12: this.customHour12 ?? undefined,
            timeZone: this.customTimeZone ?? undefined,
            calendar: this.customCalendar ?? undefined,
            dayPeriod: this.customDayPeriod ?? undefined,
            numberingSystem: this.customNumberingSystem ?? undefined,
            dateStyle: this.customDateStyle ?? undefined,
            timeStyle: this.customTimeStyle ?? undefined,
            hourCycle: this.customHourCycle ?? undefined
        };
        return options;
    }
}
__decorate([
    attr
], TableColumnDateText.prototype, "format", void 0);
__decorate([
    attr({ attribute: 'custom-locale-matcher' })
], TableColumnDateText.prototype, "customLocaleMatcher", void 0);
__decorate([
    attr({ attribute: 'custom-weekday' })
], TableColumnDateText.prototype, "customWeekday", void 0);
__decorate([
    attr({ attribute: 'custom-era' })
], TableColumnDateText.prototype, "customEra", void 0);
__decorate([
    attr({ attribute: 'custom-year' })
], TableColumnDateText.prototype, "customYear", void 0);
__decorate([
    attr({ attribute: 'custom-month' })
], TableColumnDateText.prototype, "customMonth", void 0);
__decorate([
    attr({ attribute: 'custom-day' })
], TableColumnDateText.prototype, "customDay", void 0);
__decorate([
    attr({ attribute: 'custom-hour' })
], TableColumnDateText.prototype, "customHour", void 0);
__decorate([
    attr({ attribute: 'custom-minute' })
], TableColumnDateText.prototype, "customMinute", void 0);
__decorate([
    attr({ attribute: 'custom-second' })
], TableColumnDateText.prototype, "customSecond", void 0);
__decorate([
    attr({ attribute: 'custom-time-zone-name' })
], TableColumnDateText.prototype, "customTimeZoneName", void 0);
__decorate([
    attr({ attribute: 'custom-format-matcher' })
], TableColumnDateText.prototype, "customFormatMatcher", void 0);
__decorate([
    attr({ attribute: 'custom-hour12', converter: optionalBooleanConverter })
], TableColumnDateText.prototype, "customHour12", void 0);
__decorate([
    attr({ attribute: 'custom-time-zone' })
], TableColumnDateText.prototype, "customTimeZone", void 0);
__decorate([
    attr({ attribute: 'custom-calendar' })
], TableColumnDateText.prototype, "customCalendar", void 0);
__decorate([
    attr({ attribute: 'custom-day-period' })
], TableColumnDateText.prototype, "customDayPeriod", void 0);
__decorate([
    attr({ attribute: 'custom-numbering-system' })
], TableColumnDateText.prototype, "customNumberingSystem", void 0);
__decorate([
    attr({ attribute: 'custom-date-style' })
], TableColumnDateText.prototype, "customDateStyle", void 0);
__decorate([
    attr({ attribute: 'custom-time-style' })
], TableColumnDateText.prototype, "customTimeStyle", void 0);
__decorate([
    attr({ attribute: 'custom-hour-cycle' })
], TableColumnDateText.prototype, "customHourCycle", void 0);
const nimbleTableColumnDateText = TableColumnDateText.compose({
    baseName: 'table-column-date-text',
    template,
    styles
});
DesignSystem.getOrCreate()
    .withPrefix('nimble')
    .register(nimbleTableColumnDateText());
export const tableColumnDateTextTag = 'nimble-table-column-date-text';
//# sourceMappingURL=index.js.map