import { bindable, customElement } from "aurelia-framework";
import { IDateConfig, isDisabled } from "./calendar-utils";
import {DateUtils} from '../../utils/date-utils';

@customElement("years-page")
export class YearsPage {
  @bindable() public date: Date;
  @bindable() public config: IDateConfig;

  protected pageStart: Date;
  protected isAttached: boolean = false;

  constructor(private dateUtils: DateUtils){

  }

  protected attached() {
    this.isAttached = true;
  }

  protected dateChanged(newMonth) {
    this.date = newMonth || new Date();
    this.pageStart = this.dateUtils.addYears(this.dateUtils.getStartOfDecade(this.date), -1);
  }

  protected getYear(year: number): KeyValue {
    const date = this.dateUtils.addYears(this.pageStart, year);

    const classes = [];
    if (year === 0 || year === 11) {
      classes.push("date-other");
    }
    if (this.config) {
      if ((isDate(this.config.date) && this.dateUtils.isSameYear(date, this.config.date)) ||
        (isArray(this.config.date) && this.dateUtils.isSameYear(date, this.config.date[0]))) {
        classes.push("selected");
      }

      if (isDisabled({ disabled: [], ...this.config }, date, this.dateUtils)) {
        classes.push("disabled");
      }
    }

    return { date, label: this.dateUtils.format(date, "yyyy"), classes: classes.join(" ") };
  }
}
