import { DatePickerTranslations, Internationalization } from './../../constants/constants';
import { bindable, bindingMode, customElement } from "aurelia-framework";
import { I18N } from "aurelia-i18n";
import { IDateConfig, isDisabled } from "./calendar-utils";
import { DateUtils } from '../../utils/date-utils';
import { UIRangePickerSelectionMode } from './ui-range-picker';

@customElement("months-page")
export class MonthsPage {
  @bindable()
  public date: Date;

  @bindable()
  public config: IDateConfig;
  @bindable({ defaultBindingMode: bindingMode.oneTime }) public selection: UIRangePickerSelectionMode = UIRangePickerSelectionMode.Day;

  @bindable()
  private translations: DatePickerTranslations = Internationalization.datePickerTranslationsEN;

  protected isAttached: boolean = false;

  constructor(private i18n: I18N, private dateUtils: DateUtils) {

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

  protected getMonth(month: number): KeyValue {
    const newDate = this.dateUtils.setMonths(this.date, month) as Date;

    const classes = [];
    if (this.config) {
      if (this.selection == UIRangePickerSelectionMode.MonthToMonth) {
        if (isArray(this.config.date)) {
          if (
            this.dateUtils.isAfter(this.dateUtils.getStartOfDay(this.dateUtils.getStartOfMonth(newDate)), this.dateUtils.getStartOfDay(this.dateUtils.getStartOfMonth(this.config.date[0]))) &&
            this.dateUtils.isBefore(this.dateUtils.getStartOfDay(this.dateUtils.getStartOfMonth(newDate)), this.dateUtils.getStartOfDay(this.dateUtils.getStartOfMonth(this.config.date[1])))
          ) {
            classes.push("select-hilight");
          }
          if (this.dateUtils.isSameMonth(this.config.date[0], newDate)) {
            classes.push("select-start");
          }

          if (this.dateUtils.isSameMonth(this.config.date[1], newDate)) {
            classes.push("select-end");
          }
        }
      } else {
        if ((isDate(this.config.date) && this.dateUtils.isSameMonth(newDate, this.config.date)) ||
          (isArray(this.config.date) && this.dateUtils.isSameMonth(newDate, this.config.date[0]))) {
          classes.push("selected");
        }
      }

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

    return { date: newDate, classes: classes.join(" ") };
  }
}
