import { CustomLogger } from './../../../modules/custom-logger';
import { I18N } from 'aurelia-i18n';
import { bindable, customElement } from "aurelia-templating";

export interface StepElement {
  id: string;
  step: number;
  label: string;
  isValidStep: boolean;
  isActif: boolean
  icon: string;
  disabledClick: () => boolean;
}

@customElement('step-timeline')
export class StepTimeline {
  @bindable
  public isHorizontal: boolean = true;

  @bindable
  public useCustonIcon: boolean = false;

  @bindable
  public stepElements: Array<StepElement>;

  @bindable
  public currentElement: StepElement;

  constructor(private logger: CustomLogger, private i18n: I18N) {


  }
  public navigateToStep(step: StepElement) {
    if (this.currentElement.step > step.step && !step.disabledClick()) {
      this.stepElements.filter(x => x.step > step.step).forEach(x => {
        x.isActif = false;
        x.isValidStep = false;
      });
      step.isValidStep = false;
      step.isActif = true;
      this.currentElement = step;
    } else {
      this.logger.LogError(this.i18n.tr("steptimeline.canNotNavigate"), null, null, true);
    }
  }
}
