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

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

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

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

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

import { StepOneModel } from './wizardstepone.model';

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

@Component({
    selector: 'knk-step-one',
    templateUrl: './wizardstepone.component.html',
    providers: [
        {provide: WizardStepService, useExisting: StepOneComponent } // forwardRef(() => StepOneComponent)
    ],
    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 StepOneComponent implements WizardStepService, OnInit {
    public stepOneForm: FormGroup;
    stepOneModel: StepOneModel;
    stepOneFields: Array<FormlyFieldConfig>;
    isShown: boolean = false;

    helpFormOpen: string;

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

    constructor() {
        this.stepOneForm = new FormGroup({});
        this.stepOneModel = new StepOneModel();
        this.stepOneFields = this.stepOneModel.formFields();
    }

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

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

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

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

    loadData(value: Array<{[key: string]: string}>): void {
        value.forEach((data) => {
            for (let key in data) {
                let field: AbstractControl = this.stepOneForm.get(key);
                if (field) {
                    field.setValue(data[key]);
                }
            }
        });
    }
    saveData(): Array<{[key: string]: string}> {
        let result: Array<{[key: string]: string}> = [];
        for (let key in this.stepOneModel) {
            if (typeof this.stepOneModel[key] !== 'function') {
                result.push({ key: this.stepOneModel[key] });
            }
        }
        return result;
    }
}
