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

@Component({
  selector: 'app-skill-form',
  templateUrl: './skill-form.component.html',
  styleUrls: ['./skill-form.component.css']
})
export class SkillFormComponent implements OnInit {
  private sub: any;
  userForm: FormGroup;
  editForm = false;
  formTitle = 'Add New Skillsets';
  img_path = environment.imageUrl+'/assets/img/admin/';
  skills = [];

  constructor(
    private fb: FormBuilder,
    private navBarService: NavBarService,
    private router: Router,
    private AuthService: AuthService,
    private route: ActivatedRoute
  ) {
    this.userForm = this.fb.group({
      category: ['', Validators.required],
      master: ['', Validators.required],
      skills: ['', Validators.required]
    });
   }

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

    this.sub =  this.route.params.subscribe(params => {
      console.log('id ', params['id']);
      if (params['id'] !== undefined) {

        this.AuthService.getAllSkillTrackDetailsBy(params['id']).then(resp => {

          console.log(resp,'Skill Detailssss')

        }).catch(err => {

        })

        this.editForm = true;
        this.formTitle = 'Edit Skillsets';
        this.userForm.setValue({
          category: 'Front-End Developer',
          master: 'Javascript',
          skills: 'Full-Stack'
        });
      }
    });
  }

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

  addSkill() {
    this.skills.push(this.userForm.controls['skills'].value);
    this.userForm.controls['skills'].setValue('');
  }

  removeSkill(index) {
    this.skills.splice(index, 1);
  }
}
