import {Component, OnInit, forwardRef} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';

@Component({
    selector: 'paramsItems',
    templateUrl: './template.html',
    styleUrls: ['./style.less'],
    providers: [{
        provide: NG_VALUE_ACCESSOR,
        useExisting: forwardRef(() => ParamsItems),
        multi: true
    }]
})
export default class ParamsItems implements OnInit {
    private onValueChange: any;
    private value: any;
    private list: any = [];

    ngOnInit(): void {
    }

    writeValue(value: any): void {
        const list = value || [];
        this.list = list.map(item => {
            item.id = Math.random() * 10000000;
            item.value = item.value || '';
            return item;
        });
        this.setValue();
    }

    registerOnChange(changeFn: any): void {
        this.onValueChange = changeFn;
    }

    registerOnTouched(changeFn: any): void {

    }

    addItem() {
        this.list.push({
            id: Math.random() * 10000000,
            value: ''
        });
        this.setValue();
    }

    removeItem(item, index) {
        this.list.splice(index, 1);
        this.setValue();
    }

    changeKey(value, item) {
        item.key = value;
        this.setValue();
    }

    changeValue(value, item) {
        item.value = value;
        this.setValue();
    }

    setValue() {
        if (this.list.length == 0) {
            this.onValueChange && this.onValueChange(false);
            return;
        }
        for (let i = 0; i < this.list.length; i++) {
            if (!this.list[i].key) {
                this.onValueChange && this.onValueChange(null);
                return;
            }
        }
        this.onValueChange && this.onValueChange(this.list.map(item => {
            delete item.id;
            return item;
        }));
    }
}