import { Component, OnInit, NgZone } from '@angular/core';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
import { CustomValidators } from 'ng2-validation';

import { UserManagementService } from './user-management.service';
import { TeamService } from './team.service';

const password = new FormControl('', Validators.required);

@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.scss']
})
export class SignupComponent implements OnInit {

  model: any = {};
  public form: FormGroup;
  public form2: FormGroup;
  teamView: boolean = false;
  sUser: object = {};
  accountSubmitted = false;
  teamSubmitted = false;
  accountError: string;
  teamError: string;
  constructor(private fb: FormBuilder, private router: Router, private zone: NgZone, private userService: UserManagementService, private teamService: TeamService) {
    console.log('Signup constructor');
  }

  ngOnInit() {
    console.log('Signup init');
    this.form = this.fb.group( {
      name: [null , Validators.compose ( [ Validators.required ] )],
      email: [null, Validators.compose([Validators.required, CustomValidators.email])],
      password: password
    } );
    var pattern = '/^S+$/';
    this.form2 = this.fb.group ( {
      teamname: [null, Validators.compose([Validators.required, Validators.minLength(3)])]
    });
    console.info(this.userService.getUser());
  }

  onSubmit() {
    var s = this.userService.signUp(this.form.value.name, this.form.value.email, this.form.value.password)
      .subscribe((res) => {
        this.zone.run(() => {
          this.sUser = res;
          this.teamView = true;
        });
      }, (error) => {
        console.error(error);
        this.accountError = error.message;
        this.accountSubmitted = false;
      });
      this.accountSubmitted = true;
  }

  createTeam() {
    this.teamService.createTeam(this.form2.value.teamname)
      .subscribe(
        result => {
          console.info("first subscription:::");
          console.info(result);
          this.teamService.addTeamToUser(result, this.sUser)
            .subscribe(
              result => setTimeout(() => this.router.navigate(['/dashboard'])),
              error => console.error(error)
            )
        },
        error => {
          console.error(error);
          this.teamError = error.message;
          this.teamSubmitted = false;
        }
      )
        this.teamSubmitted = true;
  }
}

<div class="session white-bg">
  <div class="pattern-left" style="background-image: url('../../assets/images/pattern-left.png')"></div>
  <div class="pattern-right" style="background-image: url('../../assets/images/pattern-right.png')"></div>
  <div class="session-content">
    <div class="session-wrapper">
      <md-card>
        <md-card-content>
          <form [formGroup]="form" (ngSubmit)="onSubmit()" *ngIf="!teamView">
            <div class="text-xs-center pb-1">
              <img src="assets/images/logo-dark.png" alt=""/>
              <p><b>Superpowers await.</b></p>
              <p class="mat-text-muted">Create your new account.</p>
            </div>
            <div fxLayout="column"  fxLayoutAlign="space-around">
              <div class="pb-1">
                <md-input-container style="width: 100%">
                  <input mdInput placeholder="Name" type="text" [formControl]="form.controls['name']">
                </md-input-container>
                <small *ngIf="form.controls['name'].hasError('required') && form.controls['name'].touched" class="mat-text-warn">You must include your name.</small>
                <small *ngIf="form.controls['name'].errors?.email && form.controls['name'].touched" class="mat-text-warn">You must include a valid name.</small>
              </div>
              <div class="pb-1">
                <md-input-container style="width: 100%">
                  <input mdInput placeholder="Email address" type="email" [formControl]="form.controls['email']">
                </md-input-container>
                <small *ngIf="errorMessage" class="mat-text-warn">{{errorMessage}}</small>
                <small *ngIf="form.controls['email'].hasError('required') && form.controls['email'].touched" class="mat-text-warn">You must include an email address.</small>
                <small *ngIf="form.controls['email'].errors?.email && form.controls['email'].touched" class="mat-text-warn">You must include a valid email address.</small>
              </div>
              <div class="pb-1">
                <md-input-container style="width: 100%">
                  <input mdInput type="password" placeholder="Password" [formControl]="form.controls['password']">
                </md-input-container>
                <small *ngIf="form.controls['password'].hasError('required') && form.controls['password'].touched" class="mat-text-warn">You must include password.</small>
              </div>
              <div class="pb-1">
                <md-checkbox>I have read and agree to the terms of service.</md-checkbox>
              </div>
              <button md-raised-button color="primary" class="btn-block" type="submit" [disabled]="!form.valid || accountSubmitted">
                Create your account
                <span class="spinner" *ngIf="accountSubmitted">
                  <svg width='20px' height='20px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-ring">
                      <rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect>
                      <circle cx="50" cy="50" r="40" stroke-dasharray="163.36281798666926 87.9645943005142" stroke="#2c3e50" fill="none" stroke-width="20">
                          <animateTransform attributeName="transform" type="rotate" values="0 50 50;180 50 50;360 50 50;" keyTimes="0;0.5;1" dur="1s" repeatCount="indefinite" begin="0s"></animateTransform>
                      </circle>
                  </svg>
                </span>
              </button>
              <div class="login-error" *ngIf="accountError">
                {{accountError}}
              </div>
            </div>
            <div class="pt-1 pb-1 text-xs-center">
              <a [routerLink]="['/login']">Already have account? Sign in </a>
              &nbsp;&nbsp;&nbsp;&nbsp;
              <!--<a>Forgot password?</a>-->
            </div>
          </form>
          <form [formGroup]="form" (ngSubmit)="createTeam()" *ngIf="teamView">
            <div class="text-xs-center pb-1">
              <img src="assets/images/logo-dark.png" alt=""/>
              <p>
                <b>Time to name your team.</b>
              </p>
              <p class="mat-text-muted">Your team name has to be lowercase & contain no spaces.</p>
            </div>
            <div fxLayout="column" fxLayoutAlign="space-around">
              <div class="pb-1">
                <md-input-container style="width: 100%">
                  <input mdInput placeholder="teamname" type="text" [formControl]="form2.controls['teamname']">
                </md-input-container>
                <small *ngIf="errorMessage" class="mat-text-warn">{{errorMessage}}</small>
                <small *ngIf="form2.controls['teamname'].hasError('required') && form2.controls['teamname'].touched" class="mat-text-warn">You must include your teamname.</small>
                <small *ngIf="form2.controls['teamname'].hasError('pattern') && form2.controls['teamname'].touched" class="mat-text-warn">You must include a valid teamname (no spaces).</small>
              </div>
              <button md-raised-button color="primary" class="btn-block" type="submit" [disabled]="!form2.valid || teamSubmitted">
                Create your team
                <span class="spinner" *ngIf="teamSubmitted">
                  <svg width='20px' height='20px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-ring">
                      <rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect>
                      <circle cx="50" cy="50" r="40" stroke-dasharray="163.36281798666926 87.9645943005142" stroke="#2c3e50" fill="none" stroke-width="20">
                          <animateTransform attributeName="transform" type="rotate" values="0 50 50;180 50 50;360 50 50;" keyTimes="0;0.5;1" dur="1s" repeatCount="indefinite" begin="0s"></animateTransform>
                      </circle>
                  </svg>
                </span>
              </button>
              <div class="login-error" *ngIf="teamError">
                {{teamError}}
              </div>
            </div>
          </form>
        </md-card-content>
      </md-card>
    </div>
  </div>
</div>