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

import * as marked from 'marked';
import { Slide } from '../../shared/slide';
import { SlideService } from '../../shared/service/slide.service';
import { Team } from '../../shared/team';

@Component({
  selector: 'app-slide-editor',
  templateUrl: './slide-editor.component.html',
  styleUrls: ['./slide-editor.component.css']
})
export class SlideEditorComponent implements OnInit {
  private md;
  public emptyTeam: Team = new Team();
  public slide: Slide;
  public teams: Array<Team> = [];
  public renderedPreview: String = '';
  public previewVisible = false;

  constructor(private slideService: SlideService,
              private titleService: Title,
              private route: ActivatedRoute,
              private router: Router) {
    this.md = marked.setOptions({});
    this.emptyTeam.name = 'All teams';
  }

  ngOnInit() {
    this.titleService.setTitle('Edit slide : MTAStv');
    this.route.data.subscribe((data: {
      slide: Slide,
      teams: Array<Team>
    }) => {
      this.teams = data.teams;
      this.slide = data.slide ? data.slide : new Slide;
      this.slide.team = this.slide.team === null
        ? this.emptyTeam
        : this.teams.find(team => team.id === this.slide.team.id);
    });
  }

  public saveSlide() {
    if (this.canSave) {
      this.slideService
        .persist(this.slide)
        .subscribe(result => this.router.navigate(['/admin/slides']));
    }
  }

  get canSave(): boolean {
    return [
      this.slide.title,
      this.slide.slideData
    ].every(field => field.trim().length > 0);
  }

  get canPreview(): boolean {
    return this.slide.slideData.trim().length > 0;
  }

  public preview() {
    this.previewVisible = true;
    this.renderedPreview = this.md.parse(this.slide.slideData);
  }
}