<script>
    class EditForm {
        props
        fields
        constructor({ids}) {
            this.props = {
                ids,
                movimientos: []
            }
            this.fields = [
                {
                    name: 'index',
                    value: index => index
                },
                {
                    name: 'id',
                    value: movimiento => movimiento.id
                },
                {
                    id: 'centro_costo',
                    name: 'centro_id',
                    type: 'dropdown',
                    value: movimiento => movimiento.detalles.centro_costo.id ?? '',
                    values: CentrosCostos.get().map(centroCosto => {
                        return {
                            value: centroCosto.id,
                            name: `${centroCosto.id} - ${centroCosto.descripcion}`,
                            text: `${centroCosto.id} - ${centroCosto.descripcion}`,
                        }
                    })
                },
                {
                    name: 'rut',
                    type: 'text',
                    value: movimiento => movimiento.detalles.rut ?? ''
                },
                {
                    id: 'digito',
                    value: movimiento => movimiento.detalles.digito ?? ''
                },
                {
                    name: 'nombre',
                    type: 'text',
                    value: movimiento => movimiento.detalles.nombres ?? ''
                },
                {
                    name: 'categoria',
                    type: 'text',
                    value: movimiento => movimiento.detalles.categoria ?? ''
                },
                {
                    name: 'detalle',
                    type: 'text',
                    value: movimiento => movimiento.detalles.detalle ?? ''
                },
                {
                    name: 'identificador',
                    type: 'text',
                    value: movimiento => movimiento.detalles.identificador ?? ''
                }
            ]

            this.fields.filter(field => typeof field.values !== 'undefined').forEach(field => {
                $(this.props.ids.form).find(`#${field.id}`).dropdown('change values', field.values)
            })
        }
        reset() {
            $(this.props.ids.form).form('reset')
        }
        show({modal, movimiento, index}) {
            modal.find(this.props.ids.data).show()

            this.fields.forEach(field => {
                if (typeof field.name !== 'undefined') {
                    switch (field.type) {
                        case 'dropdown':
                            modal.find(`#${field.id}`).dropdown('set selected', field.value(movimiento))
                            break
                        default:
                            if (field.name === 'index') {
                                modal.find(`[name='${field.name}']`).val(index)
                                return
                            }
                            modal.find(`[name='${field.name}']`).val(field.value(movimiento))
                            break
                    }
                    return
                }
                modal.find(`#${field.id}`).text(field.value(movimiento))
            })
        }
        setup() {
            $(this.props.ids.form).on('submit', {
                form_id: this.props.ids.form,
            }, app.handlers.events.edit().modal)
        }
    }
</script>
