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

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

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

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

import { Observer } from 'rxjs/Observer';

import { Observable } from 'rxjs/Observable';

import 'rxjs/add/observable/empty';
import 'rxjs/add/observable/interval';
import { take } from 'rxjs/operators';

import { IntervalObservable } from 'rxjs/observable/IntervalObservable';

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

@Component({
    selector: 'knk-createknok',
    templateUrl: './createknok.component.html',
    styleUrls: ['./createknok.component.scss']
})
export class CreateKnokComponent_old 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 activeStepIndex(): number {
        return this.steps.indexOf(this.currentStep);
    }

    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<{[key: string]: string}> {
        return Observable.empty();
        // return IntervalObservable.create(3000)\
        //    .map((val, i) => {
        //     return {title: 'Title' + i.toString(),
        //         name: 'Name' + i.toString(),
        //         firstName: 'First Name' + i.toString(),
        //         lastName: 'Last Name' + i.toString()};
        // }).pipe(take(2));

        // return Observable.create((observer: Observer<{[key: string]: string}>) => {

        //     observer.next({title: 'Title1',
        //         name: 'Name1',
        //         firstName: 'First Name1',
        //         lastName: 'Last Name1'});

        //       setInterval(() => {
        //         observer.next({title: 'Title2',
        //         name: 'Name2',
        //         firstName: 'First Name2',
        //         lastName: 'Last Name2'});
        //         observer.complete();
        //       }, 5000);
        // });
    }

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