import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { FormBuilder, FormGroup, Validators, AbstractControl } from '@angular/forms';
import { NavBarService } from '../../admin.service';


@Component({
  selector: 'app-ccindex-form',
  templateUrl: './ccindex-form.component.html',
  styleUrls: ['./ccindex-form.component.css']
})
export class CCIndexFormComponent implements OnInit {
  private sub: any;
  userForm: FormGroup;
  skills = [ {id: 1, info: 'Javascript'} ];
  editForm = false;
  formTitle = 'Add CC Index';
  subheaders = { label: 'Sub-Header - 1', data: [] };
  subheaders2 = { label: 'Sub-Header - 2', data: [] };

  constructor(
    private fb: FormBuilder,
    private navBarService: NavBarService,
    private router: Router,
    private route: ActivatedRoute
  ) {
    this.userForm = this.fb.group({
      skill: ['Select'],
      level: ['', Validators.required],
      description: ['', Validators.required],
      header1: ['', Validators.required],
      header2: ['', Validators.required]
    });
   }

  ngOnInit() {
    this.navBarService.setCurrentPage(13);

    this.sub =  this.route.params.subscribe(params => {
      if (params['id'] !== undefined) {
        this.editForm = true;
        this.formTitle = 'Edit CC Index';
        this.userForm.setValue({
          skill: [1],
          level: '1',
          description: [''],
          header1: ['Core'],
          header2: ['']
        });
        this.subheaders.data = ['Design Midstet', 'Adaptive/Computational Thinking'];
      }
    });
  }

  onSubmit(value): void {
    console.log('Submitted value: ', value , this.subheaders, this.subheaders2);
  }
}
