class Archivo {
    constructor({folder, filename}) {
        this.folder = folder
        this.filename = filename
        this.modal = null
    }
    setModal(modal) {
        this.modal = modal
        return this
    }
    draw() {
        return $('<tr></tr>').append(
            $('<td></td>').append(
                $('<a></a>').attr('class', 'item').attr('href', _urls.base + ['upload', this.folder, this.filename].join('/')).html(this.filename)
            )
        ).append(
            $('<td></td>').attr('class', 'right aligned').append(
                $('<button></button>').attr('class', 'ui mini circular icon button').append(
                    $('<i></i>').attr('class', 'edit icon')
                ).click((e) => {
                    e.preventDefault()
                    const t = e.currentTarget
                    this.edit()
                    return false
                })
            ).append(
                $('<button></button>').attr('class', 'ui mini red circular icon button').append(
                    $('<i></i>').attr('class', 'remove icon')
                ).click((e) => {
                    e.preventDefault()
                    const t = e.currentTarget
                    this.remove()
                    return false
                })
            )
        )
    }
    edit() {
        this.modal.find('form').trigger('reset')
        this.modal.find('form').find("[name='folder']").val(this.folder)
        this.modal.find('form').find("[name='old_filename']").val(this.filename)
        this.modal.find('form').find("[name='filename']").val(this.filename)
        this.modal.modal('show')
    }
    remove() {
        return sendDelete([_urls.api, 'upload', this.folder, this.filename].join('/')).then((data) => {
            if (data.deleted) {
                archivos.get()
            }
        })
    }
}
const archivos = {
    id: '#archivos',
    archivos: [],
    modals: {
        add: null,
        edit: null
    },
    get: function() {
        return {
            parent: () => {
                let parent = $(this.id).find('tbody')
                if (parent.length === 0) {
                    const table = $('<table></table>').attr('class', 'ui striped table').append(
                        $('<thead></thead>').append(
                            $('<tr></tr>').append(
                                $('<th></th>').html('Archivo')
                            ).append(
                                $('<th></th>').attr('class', 'right aligned').append(
                                    $('<button></button>').attr('class', 'ui tiny green circular icon button').append(
                                        $('<i></i>').attr('class', 'plus icon')
                                    ).click((e) => {
                                        e.preventDefault()
                                        this.add()
                                        return false
                                    })
                                )
                            )
                        )
                    )
                    parent = $('<tbody></tbody>')
                    table.append(parent)
                    $(this.id).append(table)
                }
                return parent
            },
            archivos: () => {
                return sendGet(_urls.api + '/uploads').then((data) => {
                    if (data.files === null || data.files.length === 0) {
                        return
                    }
                    this.archivos = []
                    $.each(data.files, (i, el) => {
                        const arch = new Archivo(el)
                        arch.setModal(this.modals.edit)
                        this.archivos.push(arch)
                    })
                }).then(() => {
                    this.draw()
                })
            },
            cuentas: () => {
                return sendGet(_urls.api + '/cuentas')
            }
        }
    },
    draw: function() {
        const tbody = this.get().parent()
        tbody.empty()
        $.each(this.archivos, (i, el) => {
            tbody.append(el.draw())
        })
    },
    add: function() {
        this.modals.add.find('form').trigger('reset')
        this.modals.add.find("[name='cuenta']").dropdown('clear')
        this.modals.add.modal('show')
    },
    doAdd: function() {
        const data = new FormData(this.modals.add.find('form')[0])
        return sendPost(_urls.api + '/uploads/add', data, true).then((resp) => {
            this.modals.add.modal('hide')
            this.get().archivos()
        })
    },
    doEdit: function() {
        const folder = this.modals.edit.find("[name='folder']").val()
        const filename = this.modals.edit.find("[name='old_filename']").val()
        const data = JSON.stringify({
            cuenta: this.modals.edit.find("[name='cuenta']").val(),
            fecha: this.modals.edit.find("[name='fecha']").val()
        })
        sendPut([_urls.api, 'upload', folder, filename].join('/'), data).then((resp) => {
            this.modals.edit.modal('hide')
            if (resp.edited) {
                this.get().archivos()
            }
        })
    },
    updateCalendar: function(modal) {
        const today = new Date()
        const start = new Date(today.getFullYear(), today.getMonth() - 1)
        modal.find('.ui.calendar').calendar({
            type: 'month',
            initialDate: start,
            maxDate: start,
            months: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
            monthsShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
            formatter: {
                date: function(date, settings) {
                    if (!date) return ''
                    const year = date.getFullYear()
                    const month = (date.getMonth() + 1).toString().padStart(2, '0')
                    return [year, month].join('-')
                }
            }
        })
    },
    updateCuentas: function(modal, data) {
        if (data.cuentas === null || data.cuentas.length === 0) {
            return
        }
        const select = modal.find("select[name='cuenta']")
        let values = []
        $.each(data.cuentas, (i, el) => {
            const nombre = [el.nombre, el.categoria.nombre].join(' - ')
            values.push({
                name: nombre,
                value: el.id,
                text: nombre
            })
        })
        select.dropdown({values})
    },
    setupModal: function() {
        this.modals.add = $('#add_modal')
        this.modals.edit = $('#edit_modal')
        $.each(this.modals, (i, el) => {
            el.modal().find('.close.icon').click(() => {
                el.modal('hide')
            })
            this.updateCalendar(el)
        })
        this.modals.add.find('form').submit((e) => {
            e.preventDefault()
            this.doAdd()
            return false
        })
        this.modals.add.find('#archivo_btn').css('cursor', 'pointer').click(() => {
            this.modals.add.find("[name='archivo']").trigger('click')
        })
        this.modals.add.find("[name='archivo']").change((e) => {
            const arch = $(e.currentTarget)
            const filename = arch[0].files[0].name
            this.modals.add.find('#archivo_btn').find('input').val(filename)
        })
        this.modals.edit.find('form').submit((e) => {
            e.preventDefault()
            this.doEdit()
            return false
        })
        this.get().cuentas().then((data) => {
            this.updateCuentas(this.modals.add, data)
            this.updateCuentas(this.modals.edit, data)
        })
    },
    setup: function() {
        this.setupModal()
        this.get().archivos()
    }
}