import { Component, OnInit} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import { Router } from '@angular/router';
import { DataService } from "../data.service";
import { AppComponent } from "../app.component";
import { FormGroup, FormBuilder, Validators, AbstractControl, ValidatorFn, FormArray } from '@angular/forms';
import * as $ from 'jquery';


@Component({
    selector: 'app-additionalform',
    templateUrl: './additionalForm.component.html',
    styleUrls: ['./form.component.css']
  })

export class AdditionalFormComponent implements OnInit {

    firstForm: any = [];
    additionalFormGroup: FormGroup;
    skillsArray = [];

    constructor(private httpClient: HttpClient, private router: Router, private userinformation: DataService, private fb: FormBuilder) {

    }

    get experienceSummary(): FormArray {
        return <FormArray>this.additionalFormGroup.get('experienceSummary');
    }

    get proffesionalExperience(): FormArray {
        return <FormArray>this.additionalFormGroup.get('proffesionalExperience');
    }

    get educationSummary(): FormArray {
        return <FormArray>this.additionalFormGroup.get('educationSummary');
    }

    get userSkillsRating(): FormArray {
        return <FormArray>this.additionalFormGroup.get('userSkillsRating');
    }

    loadingJquery() {
        $('#overlay').css('visibility', 'visible');
        setTimeout(() => {
          $('#overlay').css('visibility', 'hidden');
        }, 2000);
      }

    addEducationalSummary(): void {
        this.educationSummary.push(this.buildEducationSummary());
    }

    buildEducationSummary(): FormGroup {
        return this.fb.group({
            school: '',
            course: '',
            schoolFromDate: '',
            schoolToDate: ''
        });
    }

    addExperienceSummary(): void {
        this.experienceSummary.push(this.buildExperienceSummaryGroup());
    }

    buildExperienceSummaryGroup(): FormGroup {
        return this.fb.group({
            userExperience: ''
        });
    }

    removeButton(formArray: FormArray, arrayIndex: number): void {
        formArray.removeAt(arrayIndex);
    }

    addProfessionalExperience(): void {
        this.proffesionalExperience.push(this.buildProfessionalExperience());
    }

    buildProfessionalExperience(): FormGroup {
        return this.fb.group({
            company: '',
            position: '',
            fromDate: '',
            toDate: '',
            jobDescription: ''
        });
    }

    addSkills(skillsName: string): void {
        // console.log("this is the skill name");
        // console.log(skillsName);
        this.userSkillsRating.push(this.buildSkillsRating(skillsName));
    }

    buildSkillsRating(buildSkillName: string): FormGroup {
        return this.fb.group({
            userSkillName: '',
            userSkillLevel: '',
            userSkillYear: ''
        });
    }

    populateSkillName(): void {
        this.firstForm = JSON.parse(localStorage.getItem('firstForm'));
        this.firstForm.userSkills.map(data => this.addSkills(String(data.skillName)));
    }

    ngOnInit() {
        this.loadingJquery();

        this.additionalFormGroup = this.fb.group({
            experienceSummary: this.fb.array([ this.buildExperienceSummaryGroup() ], Validators.required),
            proffesionalExperience: this.fb.array([ this.buildProfessionalExperience() ], Validators.required),
            educationSummary: this.fb.array([ this.buildEducationSummary() ], Validators.required),
            userSkillsRating: this.fb.array([ this.populateSkillName() ], Validators.required)
        });
    }



}

<div class="container">
    <div class="row justify-content-md-center">
      <div class="col col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 ">

        <div align="center" class="header ">
          <h3 class="title">Application Form</h3>
        </div>

        <div class="content div-shadow">

          <form
          [formGroup]="additionalFormGroup">
            <div class="row">
                <div class="col-md-12">
                    <div class="form-group">
                        <div class="col col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 " style="margin-bottom: 10px;">
                            <h5>Additional Form (<span>required</span>) :</h5>
                        </div>
                        <div>
                            <hr>
                            <h5 class="formGroupLabel">Experience Summary</h5>

                            <button class="btn btn-info" type="button" style="margin-left: 40px;" (click)="addExperienceSummary()">Add</button>
                        </div>
                        <div class="experienceSummaryFormGroup" formArrayName="experienceSummary" *ngFor="let experience of experienceSummary.controls; let i=index">
                            <div [formGroupName]="i">
                                <div class="card">
                                    <div class="card-body">
                                        <button type="button" style="margin-top: 0px;" class="btn btn-danger" (click)="removeButton(experienceSummary, i)">Remove</button>
                                        <input type="text" class="form-control" id="{{ userExperience + i }}"
                                        placeholder="Write in a form of one sentence." formControlName="userExperience" style="margin-bottom: 5px;">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <h5 class="formGroupLabel">Professional Experience</h5>

                        <button type="button" class="btn btn-info" style="margin-left: 40px; color: white;" (click)="addProfessionalExperience()">Add</button>

                        <div class="professionalExperienceGroup" formArrayName="proffesionalExperience" *ngFor="let profExperience of proffesionalExperience.controls; let w=index">
                            <div [formGroupName]="w">
                                <div class="col-md-12">

                                    <div class="card" style="margin-bottom: 5px;">
                                        <div class="card-body">
                                            <button type="button" class="btn btn-danger" (click)="removeButton(proffesionalExperience, w)">Remove</button>
                                            <input type="text" class="form-control" style="margin-bottom: 5px;" id="{{ company + w }}" placeholder="Company" formControlName="company">
                                            <input type="text" class="form-control" style="margin-bottom: 5px;" id="{{ position + w }}" placeholder="Position" formControlName="position">
                                            <div class="row">
                                                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 ">
                                                    <div class="form-group">
                                                        <input type="text" class="form-control" style="margin-bottom: 5px;" id="{{ fromDate + w }}" placeholder="From" formControlName="fromDate">
                                                    </div>
                                                </div>
                                                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 ">
                                                    <div class="form-group">
                                                        <input type="text" class="form-control" style="margin-bottom: 5px;" id="{{ toDate + w }}" placeholder="To" formControlName="toDate">
                                                    </div>
                                                </div>
                                            </div>
                                            <textarea id="{{ jobDescription + w }}" placeholder="Job Description" class="form-control" formControlName="jobDescription" cols="30"  rows="10"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <h5 class="formGroupLabel">Education</h5>

                        <button type="button" class="btn btn-info" style="margin-left: 40px; color: white;" (click)="addEducationalSummary()">Add</button>

                        <div class="professionalExperienceGroup" formArrayName="educationSummary" *ngFor="let education of educationSummary.controls; let e=index">
                                <div [formGroupName]="e">
                                    <div class="col-md-12">

                                        <div class="card" style="margin-bottom: 5px;">
                                            <div class="card-body">
                                                <table class="table table-borderless">
                                                    <tbody>
                                                        <tr>
                                                            <td>
                                                                <button type="button" class="btn btn-danger" style="margin-top: 0px;" (click)="removeButton(educationSummary, e)">Remove</button>
                                                            </td>
                                                            <td>
                                                                <input type="text" class="form-control" style="margin-bottom: 5px;" id="{{ school + e }}" placeholder="School" formControlName="school">
                                                            </td>
                                                            <td>
                                                                <input type="text" class="form-control" style="margin-bottom: 5px;" id="{{ course + e }}" placeholder="Course" formControlName="course">
                                                            </td>
                                                            <td>
                                                                <input type="text" class="form-control" style="margin-bottom: 5px;" id="{{ schoolFromDate + e }}" placeholder="From" formControlName="schoolFromDate">
                                                            </td>
                                                            <td>
                                                                <input type="text" class="form-control" style="margin-bottom: 5px;" id="{{ schoolToDate + e }}" placeholder="To" formControlName="schoolToDate">
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <hr>

                            <h5 class="formGroupLabel">Rate Skills(required): </h5>
                            <div class="col-md-12">
                                <div class="card" style="margin-bottom: 5px;">
                                    <div class="card-body">
                                        <table class="table table-borderless">
                                            <tbody>
                                                <tr formArrayName="userSkillsRating" *ngFor="let skill of userSkillsRating.controls; let r=index">
                                                    <div [formGroupName]="r">
                                                        <td>
                                                            {{ userSkillName }}
                                                        </td>
                                                        <td>
                                                            <div class="form-group">
                                                                <label for="{{ userSkillLevel + r }}">Example select</label>
                                                                <select class="form-control" id="{{ userSkillLevel + r }}" formControlName="userSkillLevel">
                                                                    <option disabled selected="true">Skill Rating</option>
                                                                    <option value="beginner">Beginner</option>
                                                                    <option value="intermediate">Intermediate</option>
                                                                    <option value="advance">Advance</option>
                                                                </select>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <label for="{{ userSkillYear + r }}">Years of experience</label>
                                                            <input type="text" class="form-control" id="{{ userSkillYear + r }}" placeholder="Specify years of experience" formControlName="userSkillYear">
                                                        </td>
                                                    </div>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>


                    </div>
                </div>
            </div>
            <button class="btn btn-secondary btn-lg btn-block background-primary" type="submit">Next</button>
          </form>
        </div>
      </div>
    </div>


    <div id="overlay" align="center">
      <div class="loader"></div>
    </div>


  </div>

get userSkillsRating(): FormArray {
        return <FormArray>this.additionalFormGroup.get('userSkillsRating');
}

addSkills(skillsName: string): void {
    // console.log("this is the skill name");
    // console.log(skillsName);
    this.userSkillsRating.push(this.buildSkillsRating(skillsName));
}

buildSkillsRating(buildSkillName: string): FormGroup {
    return this.fb.group({
        userSkillName: '',
        userSkillLevel: '',
        userSkillYear: ''
    });
}

populateSkillName(): void {
    this.firstForm = JSON.parse(localStorage.getItem('firstForm'));