import { Component, Input, Output, EventEmitter, ContentChild, ContentChildren, TemplateRef, AfterContentInit } from '@angular/core';
import { RdComponent } from '../../base/rdComponent';
import { RdLib } from '../../base/rdLib';

enum WizardNavigation {
  Next,
  Previous
}

@Component({
  selector: 'rd-wizard-content',
  template: `
    <ng-content></ng-content> 
  `
})
export class WizardContent extends RdComponent {
  @Input("rd-text") text: string;
  @Input("rd-text-write-mode") textWriteMode: string = 'vertical-rl';
  @Input("rd-warning") warning: boolean;
  @Output("rd-on-open") openEvent: EventEmitter<any> = new EventEmitter<any>();

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

@Component({
  selector: 'rd-wizard',
  template: `
    <div class="row" *ngIf="showNavigator">
      <div class="col-md-12" style="left:82%">
        <rd-button rd-icon="fas fa-step-backward" rd-size="small" [rd-disabled]="activeContent.id == 0" [rd-tooltip]="translateEn('Previous')" (rd-click)="previous()"></rd-button>
        <rd-button rd-icon="fas fa-step-forward" rd-size="small" [rd-disabled]="activeContent.id == (contents._results.length - 1)" [rd-tooltip]="translateEn('Next')"  (rd-click)="next()"></rd-button>
      </div>      
    </div>    
    <div class="panel-group accordion" [attr.id]="'Wizard' + id">      
      <section class="panel panel-default sct" *ngFor="let item of contents._results" [ngStyle]="getStyle(item.active)">        
        <span *ngIf="showWarning">
          <i class="fas fa-exclamation" style="color:crimson;position:absolute;left:5px" *ngIf="item.warning"></i> 
          <i class="fas fa-check" style="color:green;position:absolute;left:5px" *ngIf="!item.warning"></i> 
        </span>                   
        <h3 [ngStyle]="{'display':item.active ? 'none':'block','writing-mode':item.textWriteMode}">{{item.text}}</h3>
        <div [ngStyle]="{'opacity':item.active ? '1':'0','pointer-events':item.active ? 'auto' : 'none'}" style="flex-direction:column;margin-top:3%">          
          <ng-template ngFor [ngForOf]="[1]" [ngForTemplate]="item?.template"></ng-template>
        </div>                    
      </section>     
    </div>
  `,
  styles: [`
    * {transition:all .4s ease-in-out;}html,body,div {width:auto;height:auto;}div.panel-group {margin-bottom:0 !important}
    div {list-style:none;position:relative;display:-webkit-box;flex-direction:row;flex-wrap:nowrap;align-items:stretch;align-content:center;overflow:hidden;} 
    div.panel-group section {flex:initial;height:auto;text-align:center;color:#808080;text-decoration:none;vertical-align:bottom;box-sizing:border-box;padding:0 15px 15px 15px;position:relative;margin-top:0 !important;border:1px solid #ddd}     
    section.sct div {text-align:left;width:auto;height:auto;overflow-y:auto;top:2% !important}div.panel-group section:hover h3 {color:#3598DC;}
    div.panel-group section>h3 {position:absolute;text-align:center;font-size:13px;font-weight:700;text-transform:uppercase;writing-mode:vertical-rl;text-orientation:upright;}    
    @media (max-width: 900px) {
      div.panel-group section>h3 {transform:rotate(90deg);bottom:23vh;min-width:12em;text-align:left;transform:rotate(-90deg);transform-origin:0 0 0; opacity:1;writing-mode:horizontal-tb;} 
      section.sct div {overflow-y:auto;}
    }
  `]
})
export class Wizard extends RdComponent implements AfterContentInit {
  constructor() {
    super();
    this.id = Wizard.id;
    Wizard.id++;
  }

  @ContentChildren(WizardContent) contents;
  @Input("rd-show-warning") showWarning: boolean = false;
  @Input("rd-show-navigator") showNavigator: boolean = true;

  translateEn = RdLib.localization.translateEn;

  id;
  contentCount: number = 0;
  public static id: number = 0;

  ngAfterContentInit() {
    if (this.contents._results.length) {
      this.contentCount = this.contents.length;
      this.setIdContent();
      this.activateContent(this.contents._results[0]);
    }
  }

  ngDoCheck() {
    if (this.contents && this.contentCount != this.contents.length) this.setIdContent();
  }

  setIdContent() {
    for (let i in this.contents._results) {
      let item = this.contents._results[i];
      item.id = parseInt(i);
    }
  }

  getStyle(isActive) {
    let contentWidth = 30 / (this.contents._results.length - 1);
    return {
      'width': isActive ? '70%' : contentWidth + '%',
      'cursor': isActive ? 'default' : 'pointer',
      'background-color': isActive ? 'white' : '#E9EDEF'
    }
  }

  activeContent;
  activateContent(content) {
    if (this.activeContent) this.activeContent.active = false;
    this.activeContent = content;
    this.activeContent.active = true;
    this.activeContent.openEvent.emit();
  }

  next = function () {
    setTimeout(function () {
      this.nextPrevProcess(WizardNavigation.Next);
    }.bind(this), 1);
  }

  previous = function () { this.nextPrevProcess(WizardNavigation.Previous); }.bind(this)

  public nextPrevProcess(type) {
    let willBeActivatedContent;
    this.activeContent.active = false;

    if (type == WizardNavigation.Next)
      willBeActivatedContent = this.contents._results[this.activeContent.id + 1];
    else if (type == WizardNavigation.Previous)
      willBeActivatedContent = this.contents._results[this.activeContent.id - 1];

    if (willBeActivatedContent) this.activateContent(willBeActivatedContent);
  }
}