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

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

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

  public judge = {
    yearlyData: [
      {
        year: 2013,
        title: 'Something something dark side',
      }
    ]
  };

  constructor(
      private yearProvider: YearService,
      private judgeService: JudgeService,
      private titleService: Title,
      private route: ActivatedRoute
  ) {}

  ngOnInit() {
    this.titleService.setTitle('Edit judge');
    this.route.data.subscribe((data: {
      judges: Array<Judge>,
    }) => {
      this.judges = data.judges;
    });
  }

  get judges(): Array<Judge> {
    return this.judgeService.judges;
  }

  set judges(judges: Array<Judge>) {
    this.judgeService.judges = judges;
  }

  get years(): Array<number> {
    return this.yearProvider.years;
  }

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

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

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