import { Component, ElementRef, 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 { Label } from '../../shared/label';
import {NgForm, NgModel} from '@angular/forms';

@Component({
  selector: 'app-team-editor',
  templateUrl: './team-editor.component.html',
  styleUrls: ['./team-editor.component.css']
})
export class TeamEditorComponent implements OnInit {
  @ViewChild('labelInput') labelInputElement: ElementRef;
  @ViewChild('signumInput') signumInputElement: ElementRef;
  public team: Team;
  public label: Label = new Label();
  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 labelColors(): Array<string> {
    return [
      'red',
      'orange',
      'yellow',
      'olive',
      'green',
      'teal',
      'blue',
      'violet',
      'purple',
      'pink',
      'brown',
      'grey',
      'black',
      'white'
    ];
  }

  get canAddLabel(): boolean {
    try {
      return [this.label.name, this.label.color].every(field => field.length !== 0)
        && this.team.labels.every(label => label.name !== this.label.name);
    } catch (e) {
      return false;
    }
  }

  public addLabel() {
    this.team.labels = this.team.labels
      .concat(Object.assign({}, this.label))
      .sort((a: Label, b: Label) => a.name < b.name ? -1 : 1);
    this.label = new Label();
  }

  public removeLabel(label: Label) {
    this.team.labels = this.team.labels.filter(teamLabel => teamLabel !== label);
  }

  public handleLabelEnter(ev: KeyboardEvent) {
    ev.preventDefault();
    if (this.canAddLabel) {
      this.addLabel();
      this.focusLabelField();
    }
  }

  public focusLabelField() {
    this.labelInputElement.nativeElement.focus();
  }

  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);
    }
  }

  public canSave(form: NgForm): boolean {
    return form.valid && [
      this.team.name.trim(),
      this.team.members
    ].every(field => field.length > 0) && this.team.filterId > 0;
  }

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

  public checkError(fieldModel: NgModel): boolean {
    return fieldModel.invalid && (fieldModel.dirty || fieldModel.touched);
  }
}