import { Component, OnInit, ViewChild } from '@angular/core';
import { Title } from "@angular/platform-browser";
import { MatTable } from "@angular/material";
import { ActivatedRoute, Router } from "@angular/router";
import { Judge } from "../shared/judge";
import { JudgeService } from "../shared/judge.service";
import { JudgeTitle } from "../shared/judge-title";

@Component({
  selector: 'app-judge-editor',
  templateUrl: './judge-editor.component.html',
  styleUrls: ['./judge-editor.component.css']
})
export class JudgeEditorComponent implements OnInit {
  @ViewChild(MatTable) private table: MatTable<Array<JudgeTitle>>;

  public judgedYearInput: JudgeTitle = new JudgeTitle();
  public displayedColumns = ['buttons', 'year', 'title'];

  public judge: Judge = new Judge();

  constructor(
      private judgeService: JudgeService,
      private titleService: Title,
      private route: ActivatedRoute,
      private router: Router
  ) {}

  ngOnInit() {
    this.titleService.setTitle('Edit judge');
    this.route.data.subscribe((data: {
      judge: Judge,
    }) => {
      this.judge = data.judge ? data.judge : new Judge();
      this.sortByYear();
    });
  }

  get canAdd(): boolean {
    return this.judgedYearInput.year != null
        && this.judgedYearInput.title.trim().length > 0;
  }

  get canSave(): boolean {
    return this.judge.name.trim().length > 0;
  }

  public addToYear() {
    let appendable = Object.assign({}, this.judgedYearInput);
    this.judge.titles.push(appendable);
    this.judgedYearInput = new JudgeTitle();
    if (this.table) { this.table.renderRows(); }
  }

  public removeFromYear(year: number) {
    this.judge.titles = this.judge.titles.filter(
        row => row.year !== year
    );
  }

  public saveJudge() {
    if (this.canSave) {
      this.judgeService.persist(this.judge).subscribe(() => this.router.navigate(['/judges']));
    }
  }

  private sortByYear() {
      this.judge.titles.sort((a,b) => a.year < b.year ? 1 : -1);
  }
}