var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var IgcMonthsViewComponent_1;
import { html, LitElement } from 'lit';
import { property, query, state } from 'lit/decorators.js';
import { range } from 'lit/directives/range.js';
import { addThemingController } from '../../../theming/theming-controller.js';
import { addKeybindings } from '../../common/controllers/key-bindings.js';
import { blazorIndirectRender } from '../../common/decorators/blazorIndirectRender.js';
import { blazorSuppressComponent } from '../../common/decorators/blazorSuppressComponent.js';
import { watch } from '../../common/decorators/watch.js';
import { registerComponent } from '../../common/definitions/register.js';
import { createDateTimeFormatters } from '../../common/localization/intl-formatters.js';
import { EventEmitterMixin } from '../../common/mixins/event-emitter.js';
import { partMap } from '../../common/part-map.js';
import { addSafeEventListener, chunk } from '../../common/util.js';
import { areSameMonth, getViewElement, MONTHS_PER_ROW } from '../helpers.js';
import { CalendarDay } from '../model.js';
import { all } from '../themes/year-month.js';
import { styles } from '../themes/year-month-view.base.css.js';
let IgcMonthsViewComponent = IgcMonthsViewComponent_1 = class IgcMonthsViewComponent extends EventEmitterMixin(LitElement) {
    static register() {
        registerComponent(IgcMonthsViewComponent_1);
    }
    set value(value) {
        this._value = CalendarDay.from(value);
    }
    get value() {
        return this._value.native;
    }
    localeChange() {
        this._intl.locale = this.locale;
    }
    formatChange() {
        this._intl.update({ month: { month: this.monthFormat } });
    }
    constructor() {
        super();
        this._value = CalendarDay.today;
        this.locale = 'en';
        this.monthFormat = 'long';
        this._intl = createDateTimeFormatters(this.locale, {
            month: { month: this.monthFormat },
            ariaMonth: { month: 'long', year: 'numeric' },
        });
        addThemingController(this, all);
        addKeybindings(this).setActivateHandler(this.handleInteraction);
        addSafeEventListener(this, 'click', this.handleInteraction);
    }
    connectedCallback() {
        super.connectedCallback();
        this.role = 'grid';
    }
    focusActiveDate(options) {
        this.activeMonth.focus(options);
    }
    handleInteraction(event) {
        const value = getViewElement(event);
        if (value !== -1) {
            this._value = this._value.set({ month: value });
            this.emitEvent('igcChange', { detail: this.value });
        }
    }
    renderMonth(entry, now) {
        const ariaLabel = this._intl.get('ariaMonth').format(entry.native);
        const value = this._intl.get('month').format(entry.native);
        const active = areSameMonth(this._value, entry);
        const current = areSameMonth(now, entry);
        const selected = this._value.month === entry.month;
        return html `
      <span part=${partMap({ month: true, selected, current })}>
        <span
          role="gridcell"
          data-value=${entry.month}
          part=${partMap({ 'month-inner': true, selected, current })}
          aria-selected=${selected}
          aria-label=${ariaLabel}
          tabindex=${active ? 0 : -1}
        >
          ${value}
        </span>
      </span>
    `;
    }
    *render() {
        const now = CalendarDay.today;
        const months = Array.from(range(12));
        for (const row of chunk(months, MONTHS_PER_ROW)) {
            yield html `
        <div part="months-row" role="row">
          ${row.map((month) => this.renderMonth(this._value.set({ month }), now))}
        </div>
      `;
        }
    }
};
IgcMonthsViewComponent.tagName = 'igc-months-view';
IgcMonthsViewComponent.styles = styles;
__decorate([
    state()
], IgcMonthsViewComponent.prototype, "_value", void 0);
__decorate([
    query('[tabindex="0"]')
], IgcMonthsViewComponent.prototype, "activeMonth", void 0);
__decorate([
    property({ attribute: false })
], IgcMonthsViewComponent.prototype, "value", null);
__decorate([
    property()
], IgcMonthsViewComponent.prototype, "locale", void 0);
__decorate([
    property({ attribute: 'month-format' })
], IgcMonthsViewComponent.prototype, "monthFormat", void 0);
__decorate([
    watch('locale')
], IgcMonthsViewComponent.prototype, "localeChange", null);
__decorate([
    watch('monthFormat')
], IgcMonthsViewComponent.prototype, "formatChange", null);
IgcMonthsViewComponent = IgcMonthsViewComponent_1 = __decorate([
    blazorIndirectRender,
    blazorSuppressComponent
], IgcMonthsViewComponent);
export default IgcMonthsViewComponent;
//# sourceMappingURL=months-view.js.map