import { Component, OnInit } from '@angular/core';
import { Injectable } from '@angular/core';
import {CareerPathService} from '../../../career-path/services/career-path.service';
import { FormGroup, FormControl } from '@angular/forms';


@Injectable()
export class ConfigService {
  constructor() { }
}
@Component({
  selector: 'app-edit-department',
  templateUrl: './edit-department.component.html',
  styleUrls: ['./edit-department.component.scss']
})
export class EditDepartmentComponent implements OnInit {

  input_name: any;
  pic_name: any;
  option: {id: number, name: string, picture: string} = {id: 0, name: "new", picture:"new"};

  discoverDescriptionForm: FormGroup;
  searchDepartmentOptions: { id: number, name: string, picture:string }[] = [];

  sub_ed = {label:'Submit'};
  ed_create_dep = {label:'Create new department'};

  constructor(private cpService: CareerPathService) {

  }


  change(option)
  {
    if(option.id == '0')
    {
      this.input_name = "";
      this.pic_name = "";
      this.sub_ed.label = 'Submit';
      this.ed_create_dep.label = 'Create new department: ';
    }
    else
    {
    //   this.departments.forEach(element => {
    //     if(element.id==x.value)
    //       urlValue.push(element);
    //   });

      this.input_name = option.name;
      this.pic_name = option.picture;
      this.sub_ed.label = 'Edit';
      this.ed_create_dep.label = 'Edit selected department: ';
    }

  }

  public departments  = [];
  getDepart()
  {
      this.searchDepartmentOptions = [];
      this.searchDepartmentOptions.push({id:0, name: "New department", picture: "none"})
      this.cpService.getDepartments().subscribe((res =>{
      res.forEach(element => {
        this.searchDepartmentOptions.push(element)
      });
      }))
  }

  postDepart()
  {
    this.cpService.postDepartment(this.input_name,this.pic_name).subscribe(res => { console.log(res)});
    this.getDepart();
  }

  patchDepart() {
    var x = this.option.id;
    this.cpService.patchDepartment(this.input_name, this.pic_name,x)
        .subscribe(
            (val) => {
                console.log("PATCH call successful value returned in body",
                            val);
            },
            response => {
                console.log("PATCH call in error", response);
            },
            () => {
                console.log("The PATCH observable is now completed.");
            });

        this.getDepart();
    }

    doRequest()
    {
      var x = this.option.id;
      console.log(x)
      if(x == 0)
      {
        this.postDepart();
      }
      else
      {
        this.patchDepart();
      }
    }


  ngOnInit() {
    this.getDepart();
    this.discoverDescriptionForm = new FormGroup({
      discoverDepartment: new FormControl(this.searchDepartmentOptions[0])
    });

    this.discoverDescriptionForm.get('discoverDepartment').valueChanges
    .subscribe((option: {id: number, name: string, picture: string}) =>{
      console.log(option.name);
      this.change(option)
      this.option = option;
    })
  }
}


<div class="dep-add-edit-c" style="background-color: #e0f0f3;">
    <div class="add-dep">
      <form (ngSubmit)="doRequest()">
        <div class="form-group">
          <h2 style="margin-bottom:50px;">{{ed_create_dep.label}}</h2>
          <label for="name">Department name: </label>
          <input [(ngModel)]="input_name" type="text" class="form-control" id="name" required name="input-name" >
        </div>

        <div class="form-group">
          <label for="picture">Image Url: </label>
          <input [(ngModel)]="pic_name" type="text" class="form-control" name="picture-name">
        </div>
        <button type="submit" class="dep-submit-btn" id="sub-add-button">{{sub_ed.label}}</button>
      </form>
    </div>

    <div class="edit-dep">
      <h4 style="margin-bottom:50px;">Choose a department to be edited </h4>
      <form [formGroup]="discoverDescriptionForm">
        <div class="btn-group" dropdown>
          <label for="discoverDepartment">Departments</label>
          <select formControlName="discoverDepartment"
                  class="form-control"
                  id="discoverDepartment"
                  >
          <option *ngFor="let option of searchDepartmentOptions"
                  [ngValue]="option" >
            {{option.name}}
          </option>
          </select>
        </div>
      </form>
    </div>
</div>