import { Location } from '@angular/common';

import { Component, forwardRef, OnDestroy, OnInit } from '@angular/core';

import { Directive, Input, NgModule } from '@angular/core';

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

import { StepBaseModel } from './wizard.basestep.model';

import { AbstractControl, FormGroup } from '@angular/forms';
import { FormlyFieldConfig } from '@ngx-formly/core';
import { Observable } from 'rxjs/Observable';

import { Subscription } from 'rxjs/Subscription';

import { animate, AnimationTriggerMetadata, state, style, transition, trigger } from '@angular/animations';

import 'web-animations-js';

export function slideToLeft(): AnimationTriggerMetadata {
// return trigger('slideInOut', [
//   state('void', style({position:'fixed', width:'100%'}) ),
//   state('*', style({position:'fixed', width:'100%'}) ),
//   transition(':enter', [  // before 2.1: transition('void => *', [
//     style({transform: 'translateX(100%)'}),
//     animate('0.5s ease-in-out', style({transform: 'translateX(0%)'}))
//   ]),
//   transition(':leave', [  // before 2.1: transition('* => void', [
//     style({transform: 'translateX(0%)'}),
//     animate('0.5s ease-in-out', style({transform: 'translateX(-100%)'}))
//   ])
// ]);
return trigger('slideInOut', [
        state('in', style({transform: 'translate3d(40%, 0, 0)'})),
        state('out', style({transform: 'none'})),
        transition('in => out', animate('400ms ease-in-out'))
        ]);
}

@Component({
    selector: 'knk-step',
    template: ''
})
export class StepBaseComponent implements WizardStepService, OnInit, OnDestroy {
    public stepForm: FormGroup;
    stepModel: StepBaseModel;
    stepFields: Array<FormlyFieldConfig>;
    isShown: boolean = false;
    handler: { (): void };
    currStepName: string[];

    exchange: boolean[] = [false, false, false, true, false, false, false, false];

    changeSubscriber: Subscription;

    helpFormOpen: string;

    ngOnInit(): void {
        this.helpFormOpen = 'in';
        this.changeSubscriber = this.stepForm.valueChanges.subscribe(val => {
            if (this.handler) {
                this.handler();
            }
        });
    }

    set changeCallback(handler: { (): void }) {
        this.handler = handler;
    }

    constructor(model: StepBaseModel) {
        this.stepForm = new FormGroup({});
        this.stepModel = model;
        this.stepFields = this.stepModel.formFields();
    }

    checkExchange(index: number): void {
        this.exchange[index] = !this.exchange[index];
    }
    show(): void {
        this.isShown = true;
        this.helpFormOpen = 'out';
    }
    hide(): void {
        this.isShown = false;
        this.helpFormOpen = 'in';
    }

    markAsTouched(): void {
        for (let key in this.stepModel) {
            let ctrl: AbstractControl = this.stepForm.get(key);
            if (ctrl) {
                ctrl.markAsTouched();
            }
        }
    }

    get valid(): boolean {
        return this.stepForm.valid;
    }

    get stepName(): string[] {
        return this.currStepName;
    }

    loadData(value: {[key: string]: string}): void {
        for (let key in value) {
            let field: AbstractControl = this.stepForm.get(key);
            if (field) {
                field.setValue(value[key]);
            }
        }
    }

    saveData(): Array<{[key: string]: string}> {
        let result: Array<{[key: string]: string}> = [];
        for (let key in this.stepModel) {
            if (typeof this.stepModel[key] !== 'function') {
                result.push({ key: this.stepModel[key] });
            }
        }
        return result;
    }

    ngOnDestroy(): void {
        this.changeSubscriber.unsubscribe();
    }
}
