class SettingsUI
{
    constructor(key, type, valid, title, description, checkbox_key) {
        this.key = key;
        this.type = type;
        this.valid = valid;
        this.title = title;
        this.description = description;
        this.checkbox_key = checkbox_key;
        this.settings;
        this.setting;
        this.params;
        this.param;
    }

    init()
    {
        console.log('iniit');
        this.activateCheckbox();
        this.type.on('change', () => {
            if($(this.type).val() === 'select' || $(this.type).val() === 'multiselect')
                $('#div_params').show();
            else
                $('#div_params').hide();
        });

        $('#create').on('click', () => {
            $('#div_keys').html('');
            this.settings = new Settings();
            this.params = new Params();
            $('#settings_list').val('');
            $('#name').val('');
            $('#roles').val('');
            $('#roles').trigger('change');
            $('#description').val('');
            this.key.val('');
            this.type.val('');
            this.valid.val('');
            this.title.val('');
            this.description.val('');
            this.triggers();
            $('#checkbox_key').prop('disabled', false);
            $('#checkbox_key').iCheck('uncheck');
            $('#list_params').html('<p>No se encontraron parámetros.</p>');
        });

        $('#btn_add').on('click', () => {
            if(this.checkSettingsVals()) {
                this.setInputAlerts();
                this.setting = new Setting(this.key.val(), this.type.val(), this.valid.val(), this.title.val(), this.description.val());
                this.setting.setParams(this.params);
                this.params = new Params();
                this.settings.addSetting(this.setting);
                this.key.val(''); this.type.val(''); this.valid.val(''); this.title.val(''); this.description.val('');
                this.triggers();
                this.assign_settings_list();
                $('#list_params').html('');
                $('#checkbox_key').prop('disabled', false);
            }else
               this.setInputAlerts();
        });

        $('.select2_field').select2({
            width: '100%',
            placeholder: 'Buscar'
        });

        $('#checkbox_key').on('ifChanged', () => {
            this.checkbox_key = $('#checkbox_key').prop('checked');
            if(this.checkbox_key)
                $('#div_key').show();
            else
                $('#div_key').hide();
        });

        $('#add_param').on('click', () => {
            var p = $('#param'), pk = $('#param_key');
            this.params.addParam(new Param(p.val(), pk.val(), (this.params.getLength() + 1), this.checkbox_key));
            if ($('#checkbox_key').prop('disabled') === false)
                $('#checkbox_key').prop('disabled', true);
            p.val(''); pk.val('');
        });

        // ================= GUARDAR VALORES ===============
        $('#btn_save_setting').on('click', () => {

            /*this.setValues();
            this.assign_settings_list_value();*/
            //$('#form_setting').submit();
        });

        // ================ EDITAR ===============
        /*function load_modal(name, params, route)
        {
            $('#div_keys').html('');
            $('#form_setting').attr('action', route);
            $('#modal_title').html(name);
            settings = new Settings();
            settings.setSettings(atob(params));
            settings.assemble();
        }*/
    }

    activateCheckbox() {
        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',
        });
    }

    activateSelect2(id) {
        $('#'+id).select2({
            width: '100%',
            placeholder: 'Seleccione un valor'
        });
    }

    activateDaterange(id) {
    $('#'+id).daterangepicker({
        autoApply: true,
        /*ranges: {
            'Hoy': [moment(), moment()],
            'Ayer': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            'Últimos 7 días': [moment().subtract(6, 'days'), moment()],
            'Últimos 30 días': [moment().subtract(29, 'days'), moment()],
            'Este mes': [moment().startOf('month'), moment().endOf('month')],
            'Mes anterior': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        },*/
        locale: {
            'applyLabel' : 'Aplicar',
            'cancelLabel': 'Cancelar',
            'customRangeLabel': 'Rango personalizado',
            'fromLabel': 'Del',
            'toLabel': 'al',
            'daysOfWeek': [
                'D',
                'L',
                'M',
                'X',
                'J',
                'V',
                'S'
            ],
            'monthNames': [
                'Enero',
                'Febrero',
                'Marzo',
                'Abril',
                'Mayo',
                'Junio',
                'Julio',
                'Agosto',
                'Septiembre',
                'Octubre',
                'Noviembre',
                'Diciembre'
            ]
        },
        parentEl: '#modal_setting'
    });
}

    triggers()
    {
        this.type.trigger('change');
        this.valid.trigger('change');
    }

    assign_settings_list()
    {
        $('#settings_list').val(this.settings.render());
    }

    removeItem(key)
    {
        this.settings.removeSetting(key);
        this.assign_settings_list();
    }

    checkSettingsVals()
    {
        return (this.key.val() !== null && this.type.val() !== null && this.title.val());
    }

    setInputAlerts()
    {
        $('#alert-key').html((this.key.val() === '') ? 'El campo key es obligatorio.' : '');
        $('#alert-type').html((this.type.val() === null) ? 'El campo tipo es obligatorio.' : '');
        $('#alert-title').html((this.title.val() === '') ? 'El campo título es obligatorio.' : '');
    }

    /* SET VALUES */
    loadModal(name, params, route)
    {
        $('#modal_inputs').html('');
        $('#form_setting').attr('action', route);
        $('#modal_title').html(name);
        $('#ms_name').val(name);
        $('#ms_settings_list').val('');
        this.settings = new Settings();
        params = JSON.parse(b64Decode(params));
        this.settings.setData(params.data)
        this.renderInputs();
    }

    renderInputs()
    {
        $.each(this.settings.data, (index, value) => {
            this.reviewInput(value);
        });
    }

    reviewInput(setting)
    {
        console.log(setting);
        var modal_inputs = $('#modal_inputs');
        switch (setting.type)
        {
            case 'checkbox':
                modal_inputs.append('<div><div class="i-checks row"><div class="col-md-6"><label for="'+setting.key+'"><h4>'+setting.title+'</h4></label></div><div class="col-md-6"><input type="checkbox" id="'+setting.key+'" name="'+setting.key+'" class="form-control" id="'+setting.key+'_checkbox" '+((setting.value !== null && setting.value !== "false" && setting.value !== false) ? 'checked' : '')+'></div></div></div><small class="text-info">'+setting.description+'</small><br><small id="alert-'+setting.key+'" class="text-danger alerts"></small>');
                this.activateCheckbox();
                break;
            case 'date':
                modal_inputs.append('<label for="'+setting.key+'" class="col-form-label"><h4>'+setting.title+'</h4></label><input type="date" class="form-control" id="'+setting.key+'" name="'+setting.key+'" autocomplete="off" value="'+setting.value+'"><small class="text-info">'+setting.description+'</small><br><small id="alert-'+setting.key+'" class="text-danger alerts"></small>');
                break;
            case 'datetime':
                modal_inputs.append('<label for="'+setting.key+'" class="col-form-label"><h4>'+setting.title+'</h4></label><input type="datetime-local" class="form-control" id="'+setting.key+'" name="'+setting.key+'" autocomplete="off" value="'+setting.value+'"><small class="text-info">'+setting.description+'</small><br><small id="alert-'+setting.key+'" class="text-danger alerts"></small>');
                break;
            case 'number':
                modal_inputs.append('<label for="'+setting.key+'" class="col-form-label"><h4>'+setting.title+'</h4></label><input type="number" class="form-control" id="'+setting.key+'" name="'+setting.key+'" value="'+setting.value+'"><small class="text-info">'+setting.description+'</small><br><small id="alert-'+setting.key+'" class="text-danger alerts"></small>');
                break;
            case 'text':
                modal_inputs.append('<label for="'+setting.key+'" class="col-form-label"><h4>'+setting.title+'</h4></label><input type="text" class="form-control" id="'+setting.key+'" name="'+setting.key+'" value="'+setting.value+'"><small class="text-info">'+setting.description+'</small><br><small id="alert-'+setting.key+'" class="text-danger alerts"></small>');
                break;
            case 'textarea':
                modal_inputs.append('<label for="'+setting.key+'" class="col-form-label"><h4>'+setting.title+'</h4></label><textarea class="form-control" id="'+setting.key+'" name="'+setting.key+'" rows="3">'+setting.value+'</textarea><small class="text-info">'+setting.description+'</small><br><small id="alert-'+setting.key+'" class="text-danger alerts"></small>');
                break;
            case 'time':
                modal_inputs.append('<label for="'+setting.key+'" class="col-form-label"><h4>'+setting.title+'</h4></label><input type="time" class="form-control" id="'+setting.key+'" name="'+setting.key+'" autocomplete="off" value="'+setting.value+'"><small class="text-info">'+setting.description+'</small><br><small id="alert-'+setting.key+'" class="text-danger alerts"></small>');
                break;
            case 'multiselect':
                modal_inputs.append('<label for="'+setting.key+'" class="col-form-label"><h4>'+setting.title+'</h4></label><select class="form-control select2_field" id="'+setting.key+'" name="'+setting.key+'[]" multiple>'+this.getOptions(setting.params, setting.value)+'</select><small class="text-info">'+setting.description+'</small><br><small id="alert-'+setting.key+'" class="text-danger alerts"></small>');
                this.activateSelect2(setting.key);
                break;
            case 'select':
                modal_inputs.append('<label for="'+setting.key+'" class="col-form-label"><h4>'+setting.title+'</h4></label><select class="form-control select2_field" id="'+setting.key+'" name="'+setting.key+'">'+this.getOptions(setting.params, setting.value)+'</select><small class="text-info">'+setting.description+'</small><br><small id="alert-'+setting.key+'" class="text-danger alerts"></small>');
                this.activateSelect2(setting.key);
                break;
            case 'daterange':
                modal_inputs.append('<label for="'+setting.key+'" class="col-form-label"><h4>'+setting.title+'</h4></label><input type="text" class="form-control datepicker datepicker_field" id="'+setting.key+'" name="'+setting.key+'" autocomplete="off" value="'+setting.value+'"><small class="text-info">'+setting.description+'</small><br><small id="alert-'+setting.key+'" class="text-danger alerts"></small>');
                this.activateDaterange(setting.key);
                break;
        }
        modal_inputs.append('<hr style="border: 1px dashed; opacity: 0.3">');
    }

    getOptions(params, selected)
    {

        var options = '<option value="">- - Seleccione - - </option>';
        $.each(params, (index, value) => {
            if(typeof selected === 'string'){
                options += this.setSelected(index, value, selected);
                return;
            }
            options += this.findSelected(index, value, selected);
        });
        return options;
    }

    findSelected(index, value, selected)
    {
        var opsel = '';
        $.each(selected, (i, v) => {
            if(index === v)
                opsel = v;
        });
        return this.setSelected(index, value, opsel);
    }

    setSelected(index, value, selected)
    {
        if(selected === index){
            return '<option value="'+index+'" selected>'+value+'</option>';
        }
        return '<option value="'+index+'">'+value+'</option>';
    }
}