import { Component, Input, ContentChildren, Output, EventEmitter, ElementRef, ContentChild, TemplateRef, OnInit, AfterViewInit } from '@angular/core';
import { RdComponent } from '../../base/rdComponent';
import { RdLib } from "../../base/rdLib";
import { Form } from "../form/form";

declare const mWizard;

@Component({
  selector: 'rd-form-content',
  template: `
    <ng-content></ng-content>
  `
})
export class FormContent extends RdComponent {
  @Input("rd-text") text: string;
  @Input("rd-icon") icon: string;
  @Input("rd-form") form: Form;
  @Output("rd-on-open") openEvent: EventEmitter<any> = new EventEmitter<any>();

  @ContentChild(TemplateRef) template;
  active = false;
}

@Component({
  selector: 'rd-form-wizard',
  template: `
    <rd-portlet [rd-text]="text" rd-icon="far fa-file-alt" [rd-color]="color">
      <rd-body>
        <div class="m-wizard m-wizard--4 m-wizard--brand" id="m_wizard">
          <div class="row m-row--no-padding">
            <div class="col-xl-2">
              <div class="m-wizard__head" style="padding:2rem">
                <div class="m-wizard__nav">
                  <div class="m-wizard__steps">
                    <div class="m-wizard__step" [attr.m-wizard-target]="'m_wizard_form_step_' + index"
                      *ngFor="let step of contents._results;let index = index">
                      <div class="m-wizard__step-info">
                        <a href="javascript:;" class="m-wizard__step-number" style="pointer-events:none">
                          <span>
                            <span *ngIf="!step.icon">{{index + 1}}</span>
                            <i [class]="step.icon" style="font-size:32px;color:white" *ngIf="step.icon"></i>
                          </span>
                        </a>
                        <div class="m-wizard__step-label">
                          {{step.text}}
                        </div>
                        <div class="m-wizard__step-icon">
													<i class="la la-check"></i>
												</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-10">
              <div class="m-wizard__form" style="padding:2rem 1rem">
                <form class="m-form m-form--label-align-left- m-form--state-" id="m_form">
                  <div class="m-portlet__body m-portlet__body--no-padding">
                    <div class="m-wizard__form-step" [attr.id]="'m_wizard_form_step_' + index" style="margin-bottom:1.5rem"
                      *ngFor="let content of contents._results;let index = index">
                      <ng-template ngFor [ngForOf]="[1]" [ngForTemplate]="content.template"></ng-template>
                    </div>
                  </div>
                </form>
              </div>
              <div class="m-form__actions">
                <div class="row" style="margin:0 1rem">
                  <div class="col-lg-6 m--align-left">
                    <rd-button rd-icon="fas fa-arrow-left" [rd-text]="Rdlib.localization.translateEn('Back')" rd-color="red" *ngIf="!wizardInstance?.isFirstStep()"
                      (rd-click)="wizardInstance.goPrev();currentContentEmit(wizardInstance.currentStep)">
                    </rd-button>
                  </div>
                  <div class="col-lg-6 m--align-right">
                    <rd-button rd-icon="fas fa-arrow-right" [rd-text]="Rdlib.localization.translateEn('Next')" rd-color="blue"
                      (rd-click)="goToNextContent(wizardInstance.currentStep) ? wizardInstance.goNext() : null" *ngIf="!wizardInstance?.isLastStep()">
                    </rd-button>
                    <rd-button rd-icon="fas fa-save" [rd-text]="Rdlib.localization.translateEn('Submit')" rd-color="green" (rd-click)="onSubmit()" *ngIf="wizardInstance?.isLastStep()"></rd-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </rd-body>
    </rd-portlet>
  `
})
export class FormWizard extends RdComponent implements OnInit, AfterViewInit {
  constructor(private element: ElementRef) { super(); }

  @ContentChildren(FormContent) contents;

  @Input("rd-text") text: string;
  @Input("rd-color") color: string = "green";
  @Output("rd-submit") submitEvent: EventEmitter<any> = new EventEmitter<any>();

  container;
  wizardInstance;
  forms = {};

  Rdlib = RdLib;

  ngOnInit() {
    this.container = this.jQuery(this.element.nativeElement).find("#m_wizard");
  }

  ngAfterViewInit() {
    if (this.contents._results.length > 0) this.contents._results[0].openEvent.emit();

    this.wizardInstance = new mWizard(this.container[0], { startStep: 1 })
      .on("beforeNext", () => { })
      .on("change", () => {
        this.jQuery('html, body').animate({
          scrollTop: this.jQuery(this.element.nativeElement).find("#m_wizard").offset().top
        }, 1000, 'linear');
      });
  }

  goToNextContent(step) {
    let currentContent = this.contents._results[step - 1];
    let nextContent = this.contents._results[step];

    if (!(currentContent.form instanceof Form)) {
      RdLib.screenOperations.toastr.error("This Form is not an instance of RdForm");
      this.error("This Form is not an instance of RdForm");
      return false;
    }
    else if (!this.formValidation(currentContent, step)) return false;
    else {
      nextContent.openEvent.emit();
      return true;
    }
  }

  currentContentEmit(step) {
    let currentContent = this.contents._results[step - 1];
    currentContent.openEvent.emit();
  }

  formValidation(content, step) {
    if (content.form.validate()) {
      this.forms[step] = content.form.getQuery();
      return true
    }
    else return false
  }

  onSubmit() {
    if (this.formValidation(this.contents.last, this.contents.length)) {
      let query = {};
      for (let i in this.forms) {
        query = Object.assign(query, this.forms[i]);
      }
      this.submitEvent.emit(query);
    }
  }
}