class Settings
{
    constructor() {
        this.data = [];
        this.keys = [];
    }

    addSetting(setting)
    {
        this.data[setting.getKey()] = setting;
        this.keys.push(setting.getKey());
        this.fill();
    }

    removeSetting(key) {
        this.keys.splice(key, 1);
        delete this.data[key];
        this.fill();
    }

    fill()
    {
        var html = '<p>No se encontraron configuraciones.</p>';
        if(this.keys.length > 0) {
            html = '<div class="row"><div class="col-lg-1"><b>Key</b></div><div class="col-lg-1"><b>Tipo</b></div><div class="col-lg-1">Título</div><div class="col-lg-4">Descripción</div><div class="col-lg-3"><b>Validaciones</b></div><div class="col-lg-1">Parámetros</div><div class="col-lg-1"><b>Borrar</b></div></div>';
            $.each(this.keys, (i, v) => {
                var value = this.data[v];
                var count = value.params.params !== undefined ? value.params.params.length : 'No aplica';
                html += '<div class="row"><div class="col-lg-1">'+value.key+'</div><div class="col-lg-1">'+value.type+'</div><div class="col-lg-1">'+value.title+'</div><div class="col-lg-4">'+value.description+'</div><div class="col-lg-3">'+value.validations.join(', ')+'</div><div class="col-lg-1">'+count+'</div><div class="col-lg-1"><button type="button" class="btn btn-link delete-button" title="Quitar elemento" onclick="settingsUI.removeItem(\''+value.key+'\')"><i class="fal fa-trash text-danger"></i></button></div></div>';
            });
        }
        $('#div_keys').html(html);
    }

    setData(settings)
    {
        $.each(settings, (index, value) => {
            this.data.push(new Setting(index, value.type, value.validation, value.title, value.description, value.value));
            this.data[this.data.length - 1].setParams(value.params);
            /*console.log(this.data[index]);
            this.data[index].setParams(value.params);*/
            this.keys.push(index);
        });
    }

    static create()
    {

    }

    // ======= SET VALUES =======
    setSettings(data)
    {
        this.data = JSON.parse(data);
    }

    assemble()
    {
        var html = '';
        $.each(this.data, (index, value) => {
            html += '';
        });
    }

    render()
    {
        var string = '{';
        $.each(this.keys, (i, v) => {
            string += this.data[v].render();
            string += ', ';
        });
        string = string.substr(0, string.length - 2);
        string += '}';
        return string;
    }

    /*render() {
        var json = [];
        $.each(this.keys, (i, v) => {
            var setting = this.data[v];
            var render = setting.render();
            var key = setting.getKey();
            json.push({ [key]: render });
        });
        return json;
    }*/
}