import { Component, trigger, state, style, transition, animate, keyframes } from '@angular/core';
import {NavController} from 'ionic-angular';
import {Login} from "../../pages/login/index";
import {Platform} from "../../pages/platform/index";
import { User } from '../../pages/user/index';
import { OnInit } from '@angular/core';
import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';


@Component({
    selector: 'page-register',
    templateUrl: 'registration.html',

    animations: [

        //For the logo
        trigger('flyInBottomSlow', [
            state('in', style({
                transform: 'translate3d(0,0,0)'
            })),
            transition('void => *', [
                style({transform: 'translate3d(0,2000px,0'}),
                animate('2000ms ease-in-out')
            ])
        ]),

        //For the clouds
        trigger('flyInTopFast', [
            state('in', style({
                transform: 'translate3d(0,0,0)'
            })),
            transition('void => *', [
                style({transform: 'translate3d(0,1000px,0)'}),
                animate('1000ms ease-in-out')
            ])
        ]),

        //For the background detail
        trigger('flyInBottomFast', [
            state('in', style({
                transform: 'translate3d(0,0,0)'
            })),
            transition('void => *', [
                style({transform: 'translate3d(0,2000px,0)'}),
                animate('1000ms ease-in-out')
            ])
        ]),

        //For the login form
        trigger('bounceInBottom', [
            state('in', style({
                transform: 'translate3d(0,0,0)'
            })),
            transition('void => *', [
                animate('2000ms 200ms ease-in', keyframes([
                    style({transform: 'translate3d(0,2000px,0)', offset: 0}),
                    style({transform: 'translate3d(0,-20px,0)', offset: 0.9}),
                    style({transform: 'translate3d(0,0,0)', offset: 1})
                ]))
            ])
        ]),

        //For login button and tabs
        trigger('fadeIn', [
            state('in', style({
                opacity: 1
            })),
            transition('void => *', [
                style({opacity: 0}),
                animate('1000ms 2000ms ease-in')
            ])
        ])
    ]
})

export class Registration {
    public registrationForm:any;
    tabState: any = "in";
    logoState: any = "in";
    stadiumState: any = "in";
    cloudState: any = "in";
    loginState: any = "in";
    formState: any = "in";
    cardState: any = "in";

    public myForm: FormGroup; // our model driven form
    public submitted: boolean; // keep track on whether form is submitted
    public events: any[] = []; // use later to display form changes

    constructor(private _fb: FormBuilder, public nav: NavController) { } // form builder simplify form initialization

    ngOnInit() {
        this.myForm = new FormGroup({
            email: new FormControl('', [<any>Validators.required, <any>Validators.minLength(5)]),
            username: new FormControl('', [<any>Validators.required, <any>Validators.minLength(5)]),
            password: new FormControl('', [<any>Validators.required, <any>Validators.minLength(5)]),
        });
    }

    save(model: User, isValid: boolean) {
        this.submitted = true; // set form submit to true

        // check if model is valid
        // if valid, call API to save customer
        console.log(model, isValid);
    }

    /*
    ionViewDidLoad() {
        this.registrationForm = this.form.group({
            email: ['', Validators.required],
            username: ['', Validators.compose([Validators.required, Validators.maxLength(100)])],
            password: ['', Validators.compose([Validators.required, Validators.minLength(5), Validators.maxLength(100)])],
            passwordConfirm: ['', Validators.compose([Validators.required, Validators.minLength(5), Validators.maxLength(100)])]
        })
    }

    registerUser()
    {
        let email = this.registrationForm.controls.email.value;
        let username = this.registrationForm.controls.username.value;
        let password = this.registrationForm.controls.password.value;
        let passwordConfirm = this.registrationForm.controls.passwordConfirm.value;
        console.log(email);
        console.log(username);
        console.log(password);
        console.log(passwordConfirm);

        this.nav.setRoot(Platform);
    }

    loginTapped(){
        this.nav.setRoot(Login);
    }
    */
}