import {Component, OnInit} from '@angular/core';
import {FormGroup, FormBuilder, FormArray} from '@angular/forms';
import {MatChipInputEvent} from '@angular/material';
import {ENTER, COMMA} from '@angular/cdk/keycodes';

@Component({
    selector: 'chip-test',
    templateUrl: './chip.component.html'
})
export class ChipComponent implements OnInit {

    form: FormGroup;

    //chips
    visible: boolean = true;
    selectable: boolean = true;
    removable: boolean = true;
    addOnBlur: boolean = true;
    // Enter, comma
    separatorKeysCodes = [ENTER, COMMA];

    constructor(private fb: FormBuilder) {
        this.createForm();
    }

    createForm(): void {
        this.form = this.fb.group({
            requirements: this.fb.array([])
        });
    }

    ngOnInit(): void {
    }

    add(event: MatChipInputEvent): void {
        let input = event.input;
        let value = event.value;

        // Add our requirement
        if ((value || '').trim()) {
            const requirements = this.form.get('requirements') as FormArray;
            requirements.push(this.fb.control(value.trim()));
        }

        // Reset the input value
        if (input) {
            input.value = '';
        }
    }

    remove(index: number): void {
        const requirements = this.form.get('requirements') as FormArray;

        if (index >= 0) {
            requirements.removeAt(index);
        }
    }

}