import { StepElement } from './../resources/elements/step-timeline/step-timeline';

import { I18N } from 'aurelia-i18n';
import { autoinject, observable, computedFrom } from 'aurelia-framework';
import { ImportResults, ImportService, ImportSession } from "./service/import-service";
import { param } from 'jquery';

export type DisplayContext = 'step4' | 'errorsFix';
@autoinject
export class ImportDataIndex {
  @observable
  private currentStepElement: StepElement;
  private stepElements: Array<StepElement>;
  private title: string = this.i18n.tr("importdata.importdata")

  public session: ImportSession;
  public importResults: ImportResults | null;

  public customParameters: number;
  public importSheet: boolean = false;
  public errorTableView: string;
  public lastStepFooterView: string;
  public configView: string;
  context: any;

  constructor(private importService: ImportService, private i18n: I18N) {


  }
  async activate(params) {
    this.customParameters = params.customParameter;
    this.errorTableView = params.errorView;
    this.lastStepFooterView = params.lastStepFooterView;
    this.configView = params.configView;
    this.context = params.context;
    this.initStepElements();
    await this.startSession(true);
    this.initCurrentStepElement();
  }

  async startSession(firstTime: boolean = false) {
    this.session = await this.importService.startSession(this.context, this.customParameters);
    if (firstTime && this.session.contextName?.length > 0) {
      this.title += " " + this.i18n.tr(`importdata.import${this.session.contextName}`);
    }
    this.initCurrentStepElement();
  }

  private initStepElements() {
    this.stepElements = [
      {
        id: "import",
        step: 1,
        label: this.i18n.tr("importdata.step1"),
        disabledClick: () => this.importSheet || this.currentStepElement?.step == 5
      },
      {
        id: "chooseLine",
        step: 2,
        label: this.i18n.tr("importdata.step2"),
        disabledClick: () => this.currentStepElement?.step == 5
      },
      {
        id: "mapping",
        step: 3,
        label: this.i18n.tr("importdata.step3"),
        disabledClick: () => this.importSheet || this.currentStepElement?.step == 5
      },
      {
        id: "correction",
        step: 4,
        label: this.i18n.tr("importdata.step4"),
        disabledClick: () => this.importSheet || this.currentStepElement?.step == 5
      },
      {
        id: "importation",
        step: 5,
        label: this.i18n.tr("importdata.step5")
      }
    ] as Array<StepElement>;
  }

  private initCurrentStepElement() {
    if (this.session.currentUIStep != null) {
      this.currentStepElement = this.stepElements.find(x => x.step == this.session.currentUIStep);
      if (this.currentStepElement == null) {
        this.currentStepElement = this.stepElements[0];
      }
      this.currentStepElement.isActif = true;
      this.stepElements.filter(x => x.step < this.session.currentUIStep)?.forEach(x => x.isValidStep = true);
    } else {
      this.currentStepElement = this.stepElements[0];
      this.currentStepElement.isActif = true;
    }
  }

  public async newStep() {
    this.currentStepElement.isValidStep = true;
    this.currentStepElement.isActif = false;
    let newStep = this.currentStepElement.step + 1;
    this.currentStepElement = this.stepElements.find(x => x.step == newStep);
    this.currentStepElement.isActif = true;
    this.session.currentUIStep = newStep;
    await this.importService.saveSession(this.session);
  }

  async cancelSession() {
    this.session.currentUIStep = 6;
    await this.importService.saveSession(this.session);
    this.stepElements.forEach(x => {
      x.isActif = false;
      x.isValidStep = false;
    });
    await this.startSession();
  }
}
