import { Component, OnInit, Input } from '@angular/core';
import { Router } from '@angular/router';

import { CourseThemeService } from '../../../services/course-theme.service';

import { CourseThemeData } from '../../../structures/course-theme-data';

import { emptyCourseThemeDataFactory } from '../../../empty-objects/empty-course-theme-data';

import * as Globals from '../../../globals';

@Component({
  selector: 'app-edit-theme-form',
  templateUrl: './edit-theme-form.component.html',
  styleUrls: ['./edit-theme-form.component.scss']
})
export class EditThemeFormComponent implements OnInit {

  @Input() targetAfterSubmit: string = Globals.pages.allThemes.path;

  @Input() themeData: CourseThemeData | null = null;
  model: CourseThemeData = emptyCourseThemeDataFactory();

  states: string[] = Globals.themeStates;
  statesPretty: string[] = Globals.themeStatesPretty;

  themeSavingStatus: number = Globals.savingStatus.none;

  constructor(private courseThemeService: CourseThemeService, private router: Router) { 
    this.courseThemeService.saveStatusReset();
    this.courseThemeService.courseThemeSaveStatus$.subscribe( val => this.themeSavingStatus = val );
  }

  ngOnInit(): void {
    if(this.themeData != null) {
      this.model = JSON.parse(JSON.stringify(this.themeData));
    }
  }

  async saveData(): Promise<void> {
    var data = await this.courseThemeService.saveCourseThemeData(this.model);
  
    if(data != null) {
      this.router.navigate([this.targetAfterSubmit]);
    } else {
      //this.router.navigate([this.targetAfterSubmit]);
    }
  }

}
