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

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

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

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

import { StepTwoModel } from './wizardsteptwo.model';

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

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

import { Observable } from 'rxjs/Observable';

@Component({
    selector: 'knk-step-two',
    templateUrl: './wizardsteptwo.component.html',
    providers: [
        {provide: WizardStepService, useExisting: StepTwoComponent }
    ],
    animations: [
        trigger('slideInOut', [
            state('in', style({
              // overflow: 'hidden',
              // height: 'auto',
              // width: '300px'
              transform: 'translateX(0)'
            })),
            state('out', style({
              // opacity: '0',
              // overflow: 'hidden',
              // height: '0px',
              // width: '0px'
              transform: 'translateX(100%) translateX(-50px)'
            })),
            transition('in => out', animate('400ms ease-in-out')),
            transition('out => in', animate('400ms ease-in-out'))
          ])
    ]
})
export class StepTwoComponent implements WizardStepService, OnInit {
    public stepTwoForm: FormGroup;
    stepTwoModel: StepTwoModel;
    stepTwoFields: Array<FormlyFieldConfig>;
    isShown: boolean = false;

    helpFormOpen: string;

    ngOnInit(): void {
        this.helpFormOpen = 'out';
    }

    constructor() {
        this.stepTwoForm = new FormGroup({});
        this.stepTwoModel = new StepTwoModel();
        this.stepTwoFields = this.stepTwoModel.formFields();
    }

    show(): void {
        this.helpFormOpen = 'in';
        this.isShown = true;
    }
    hide(): void {
        this.helpFormOpen = 'out';
        this.isShown = false;
    }

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

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

    get stepName(): string {
        return 'Step 2';
    }

    loadData(value: Array<{[key: string]: string}>): void {
        value.forEach((data) => {
            for (let key in data) {
                let field: AbstractControl = this.stepTwoForm.get(key);
                if (field) {
                    field.setValue(data[key]);
                }
            }
        });
    }

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