import {
  ChangeDetectionStrategy,
  Component,
  computed,
  inject,
} from '@angular/core';
import { format } from 'date-fns';
import { NgIconComponent, provideIcons } from '@ng-icons/core';
import { isaActionChevronDown, isaActionChevronUp } from '@isa/icons';
import { DatepickerViewState } from '../../datepicker-view.state';

/**
 * A component for displaying the selected month and year.
 * It utilizes a DatepickerViewState to display formatted month and year.
 */
@Component({
  selector: 'ui-selected-month-year',
  templateUrl: 'selected-month-year.component.html',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: {
    '[class]': "['ui-selected-month-year']",
  },
  imports: [NgIconComponent],
  providers: [
    provideIcons({
      isaActionChevronUp,
      isaActionChevronDown,
    }),
  ],
})
export class SelectedMonthYearComponent {
  /**
   * The state of the datepicker view, injected from DatepickerViewState.
   */
  viewState = inject(DatepickerViewState);

  /**
   * A computed property that returns the formatted month name.
   * It formats the displayed date using the 'LLLL' pattern.
   */
  readonly monthName = computed(() =>
    format(this.viewState.displayedDate(), 'LLLL'),
  );

  /**
   * A computed property that returns the formatted year number.
   * It formats the displayed date using the 'yyyy' pattern.
   */
  readonly yearNumber = computed(() =>
    format(this.viewState.displayedDate(), 'yyyy'),
  );
}
