import Modal from "./modal.js";
import Ajax from "./ajax.js";
class ConfigVariableDatatable
{
    constructor(domItem)
    {
        this.domItem = domItem
        this.datatableItem = this.domItem
        this.modalItem = $("#modalConfigVariableForm")
        this.modalEdit = new Modal(this.modalItem)
        this.tableActionEdit = this.domItem.find(".btn-variable-edit")
        this.tableActionDelete = this.domItem.find(".btn-variable-delete")
        this.formEdit = this.modalItem.find("#formEditConfigVariable")

    }
    init(){
        this.datatable = this.datatableItem.DataTable({
            processing: true,
            dom: 'Brtip',
            serverSide: true,

            language: {
                url: "/themes/vuexy/vendor/libs/datatables-sk/plugins/i18n/es-ES.json"
            },
            columns : [
                {data : 'name',searchable:true,sortable:false},
                {data : 'value',searchable:true,sortable:false},
                {data : 'description',searchable:true,sortable:false},
                {data : 'action',sortable:false,searchable:false,
                    render : (d,t) =>{
                        return `
                        <div class="btn-group btn-group-sm">
                            <a href="javascript:void(0)" data-id="${d}" class="edit-variable"><i class="ti ti-pencil ti-sm mx-2"></i></a>
                        </div>
                        `
                    } 
                },
            ],
            ajax: '/configuracion/variables/datatable'
        });

    }
    events()
    {
        this.modalItem.on("click",".btn-update-variable",this.handleUpdateVariable.bind(this))
        this.datatableItem.on("click",".edit-variable",(e)=> {
            e.preventDefault()
            this.variableId = $(e.currentTarget).data("id")
            this.handleGetVariable()
        })

    }
    handleGetVariable()
    {
        const url = `/configuracion/variables/find/${this.variableId}`
        let ajax = new Ajax(
            url,null,null,
            this.handleGetVariableSuccess.bind(this),
            this.handleGetVariableError.bind(this)
        )
        ajax.get()

    }
    handleGetVariableSuccess(data){
        this.formEdit[0].reset()
        this.modalEdit.toggle()
        this.nameInput = this.formEdit
        .find("#name")
        this.nameInput.val(data.name)
        this.valueInput = this.formEdit
        .find("#value")
        this.valueInput.val(data.value)
        this.descriptionInput = this.formEdit
        .find("#description")
        this.descriptionInput.val(data.description)
        
    }
    handleGetVariableError(err){}
    handleUpdateVariable()
    {
        const url = `/configuracion/variables/edit/${this.variableId}`
        const data = {
            value : this.valueInput.val(),
            description : this.descriptionInput.val(),
        }
        let ajax = new Ajax(
            url,
            data,
            null,
            this.handleUpdateVariableSucess.bind(this),
            this.handleUpdateVariableError.bind(this)
        )
        ajax.post()
    }
    handleUpdateVariableSucess(data){
        this.modalEdit.toggle()
        this.datatable.ajax.reload()
    }
    handleUpdateVariableError(err){}

    handleDeleteVariable()
    {
        const url = `/configuracion/variables/delete/${this.variableId}`
        let ajax = new Ajax(
            url,null,null,
            this.handleDeleteVariableSucess.bind(this),
            this.handleDeleteVariableError.bind(this)
        )
        ajax.post()
    }
    handleDeleteVariableSucess(data){
        this.datatable.reload()
    }
    handleDeleteVariableError(err){}
}

export default ConfigVariableDatatable;