import { JsonSerializer } from '../../utilities/JsonSerializer';
import { DatasetProfileService } from '../../services/dataset-profile.service';
import { DatasetProfileModelAdmin } from '../../models/datasetProfileAdmin/DatasetProfileModelAdmin';
import { Page } from '../../models/datasetProfileAdmin/Page';
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { SectionFormComponent } from '../section-form/section-form.component';
import { FormArray } from '@angular/forms';
import { Router, ActivatedRoute, ParamMap, Params } from '@angular/router';
import { PageFormComponent } from '../page-form/page-component'
import { DatasetProfileAdmin } from '../../services/datasetProfileAdmin/datasetProfileAfmin.service';
import { Section } from '../../models/datasetProfileAdmin/Section';
import { MatDialog } from '@angular/material';
import { DatasetProfilePreviewerComponent } from '../previewer/dataset-profile-previewer.component';

@Component({
  selector: 'form-comp',
  templateUrl: './form.component.html',
  providers: [DatasetProfileAdmin, DatasetProfileService],
  styleUrls: ['./form.component.scss']
})

export class FormComponent {

  dataModel: DatasetProfileModelAdmin;
  form: FormGroup;
  private profileID: string;

  constructor(
    public datasetprofileAdmin: DatasetProfileAdmin,
    private datasetProfileService: DatasetProfileService,
    private route: ActivatedRoute,
    private router: Router,
    public dialog: MatDialog,
  ) {
    this.profileID = route.snapshot.params['id'];
  }

  ngOnInit() {

    this.dataModel = JsonSerializer.fromJSONObject(new DatasetProfileModelAdmin(), DatasetProfileModelAdmin);
    this.form = this.dataModel.buildForm();
    if (this.profileID) {
      this.datasetProfileService.getDatasetProfileById(this.profileID).subscribe((data) => {
        this.dataModel = JsonSerializer.fromJSONObject(data, DatasetProfileModelAdmin);
        this.form = this.dataModel.buildForm();
      });
    }
    else {
      this.addSection();
      this.addPage();
    }
  }

  onIsMultiplicityEnabledChange(isMultiplicityEnabled: boolean) {
    if (!isMultiplicityEnabled) {
      (<FormControl>this.form.get('multiplicity').get("min")).setValue(0);
      (<FormControl>this.form.get('multiplicity').get("max")).setValue(0);
    }
  }

  addSection() {
    let section: Section = new Section();
    this.dataModel.sections.push(section);
    (<FormArray>this.form.get("sections")).push(section.buildForm());
  }

  addPage() {
    let page: Page = new Page(this.dataModel.pages.length);
    this.dataModel.pages.push(page);
    (<FormArray>this.form.get("pages")).push(page.buildForm());
  }

  DeleteSection(index) {
    this.dataModel.sections.splice(index, 1);
    (<FormArray>this.form.get("sections")).removeAt(index)
  }

  DeletePage(index) {
    this.dataModel.pages.splice(index, 1);
    (<FormArray>this.form.get("pages")).removeAt(index)
  }

  createForm(data) {
    return this.datasetprofileAdmin.createForm(data);
  }
  updateForm(id, data) {
    return this.datasetprofileAdmin.updateForm(id, data);
  }
  onSubmit() {
    let data = this.form.value;

    if (this.profileID) this.updateForm(this.profileID, data).subscribe(() => {
      this.router.navigate(['/datasetsProfiles'])
    });
    else this.createForm(data).subscribe(() => {
      this.router.navigate(['/datasetsProfiles'])
    });
  }

  preview() {
    let dialogRef = this.dialog.open(DatasetProfilePreviewerComponent, {
      height: '355px',
      width: '700px',
      data: {
        model: this.dataModel
      }
    });
  }

}