import { Component, ElementRef, HostBinding, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Title } from '@angular/platform-browser';

import { TeamService } from '../../shared/service/team.service';
import { Team } from '../../shared/team';
import { Member } from '../../shared/member';
import { slideInOutAnimation } from '../../shared/slide-in-out-animation';

@Component({
  selector: 'app-team-editor',
  templateUrl: './team-editor.component.html',
  styleUrls: ['./team-editor.component.css']
})
export class TeamEditorComponent implements OnInit {
  @ViewChild('signumInput') signumInputElement: ElementRef;
  public team: Team;
  public member: Member = new Member();

  constructor(private teamService: TeamService,
              private titleService: Title,
              private route: ActivatedRoute,
              private router: Router) {
  }

  ngOnInit() {
    this.titleService.setTitle('Team editor : MTAStv');
    this.route.data.subscribe((data: { team: Team }) => this.team = data.team ? data.team : new Team());
  }

  get canAddMember(): boolean {
    try {
      return [this.member.name, this.member.signum].every(field => field.length !== 0)
        && this.team.members.every(member => member.signum !== this.member.signum);
    } catch (e) {
      return false;
    }
  }

  public addMember() {
    this.team.members = this.team.members
      .concat(Object.assign({}, this.member))
      .sort((a: Member, b: Member) => a.signum < b.signum ? -1 : 1);
    this.member = new Member();
  }

  public handleEnter(ev: KeyboardEvent) {
    ev.preventDefault();
    if (this.canAddMember) {
      this.addMember();
      this.focusSignumField();
    }
  }

  public focusSignumField() {
    this.signumInputElement.nativeElement.focus();
  }

  public removeMember(signum: String) {
    if (confirm(`Remove the member with signum ${signum}?`)) {
      this.team.members = this.team.members.filter(member => member.signum !== signum);
    }
  }

  get canSave(): boolean {
    return [
      this.team.name.trim(),
      this.team.members
    ].every(field => field.length > 0);
  }

  public saveTeam() {
    if (this.canSave) {
      this.teamService.persist(this.team).subscribe(
        () => this.router.navigate(['/admin/teams'])
      );
    }
  }
}