import { AfterContentChecked, AfterViewInit, Component, ElementRef, Input, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core';

import { WizardStepService, WizardStepServiceData } from '../wizard/wizardstep.service';

import { WizardStepDirective } from '../wizard/wizard.component';

import { WizardComponent } from '../wizard/wizard.component';

import { Observer } from 'rxjs/Observer';

import { Observable } from 'rxjs/Observable';

import 'rxjs/add/observable/empty';

export class StubWizardStepService implements WizardStepService {
    show(): void {
        console.log('show');
    }
    hide(): void {
        console.log('hide');
    }
    markAsTouched(): void {
        console.log('markAsTouched');
    }
    get valid(): boolean {
        return false;
    }
    get isCompleted(): boolean {
        return false;
    }
    get stepName(): string {
        return '';
    }
    loadData(value: Array<{[key: string]: string}>): void {
        console.log('loadData');
    }
    saveData(): Array<{[key: string]: string}> {
        return null;
    }
}

@Component({
    selector: 'knk-wizardform',
    templateUrl: './wizardform.component.html',
    styleUrls: ['./wizardform.component.scss']
})
export class WizardFormComponent implements AfterViewInit  {
    steps: Array<WizardStepService> = [new StubWizardStepService()];
    observer: MutationObserver;
    observer1: MutationObserver;
    animationState: string = 'center';

    get activeStep(): WizardStepService {
        return this.wizard ? this.wizard.activeStep : null;
    }
    get currentStep(): WizardStepService {
        return this.wizard ? this.wizard.activeStep : null;
    }

    @ViewChild(WizardComponent)
    wizard: WizardComponent;

    @ViewChildren('stepper')
    steppers: QueryList<ElementRef>;

    ngAfterViewInit(): void {
        let config: MutationObserverInit = {
            attributes: true,
            childList: true,
            characterData: true
        };

        this.observer = new MutationObserver((mutations: MutationRecord[]) => {
            mutations.forEach((mutation: MutationRecord) => {
                this.steps = this.wizard.steps.toArray();
            });
        });

        this.steppers.forEach((el: ElementRef) => {
            this.observer.observe(el.nativeElement, config);
        });
    }

    saveData(): void {
        let result: Array<{[key: string]: string}> = [];
        this.steps.forEach(step => result = result.concat(step.saveData()));
        console.log(result);
    }

    getDataSet(): Observable<Array<{[key: string]: string}>> {
        let data: Array<{[key: string]: string}> = [
            {title: 'Title 1'},
            {name: 'Name'},
            {firstName: 'First Name'},
            {lastName: 'Last Name'}];
        return Observable.of(data).delay(5000);
    }

    public toggleAnimation(): void {
        if (this.animationState === 'right') {
          this.animationState = 'center';
        } else {
          this.animationState = 'right';
        }
      }

    private get progressSteps(): number {
        const stepWidth: number = 100 / this.steps.length;
        const currentIndex: number = this.steps.indexOf(this.currentStep) + 1;
        return stepWidth * currentIndex;
    }
}
