<script>
    class EditModal {
        props
        info
        constructor({ids, editForm}) {
            this.props = {
                ids,
                editForm,
                movimientos: []
            }
            this.info = [
                {
                    className: 'sociedad',
                    width: 'three wide',
                    value: movimiento => `<b>Sociedad</b>: ${movimiento.cuenta.inmobiliaria.sigla}`
                },
                {
                    className: 'banco',
                    width: 'three wide',
                    value: movimiento => `<b>Banco</b>: ${movimiento.cuenta.banco.nombre}`
                },
                {
                    className: 'cuenta',
                    width: 'three wide',
                    value: movimiento => `<b>Cuenta</b>: ${movimiento.cuenta.cuenta}`
                },
                {
                    className: 'fecha',
                    width: 'three wide',
                    value: movimiento => `<b>Fecha</b>: ${movimiento.fecha}`
                },
                {
                    className: 'valor',
                    width: 'three wide',
                    value: movimiento => `<b>Valor</b>: ${movimiento.abono - movimiento.cargo}`
                },
                {
                    className: 'glosa',
                    width: 'ten wide',
                    value: movimiento => `<b>Glosa</b>: ${movimiento.glosa}`
                },
            ]

            const $info = $(this.props.ids.modal).find('#modal_info')
            $info.empty()
            this.info.forEach(field => {
                $info.append(`<div class="${field.width} column ${field.className}"></div>`)
            })

            $(this.props.ids.modal).modal({
                onApprove: $element => {
                    $(this.props.editForm.props.ids.form).submit()
                }
            })
        }
        reset() {
            this.info.forEach(info => {
                $(this.props.ids.modal).find(`.${info.className}`).text('')
            })
            this.props.editForm.reset()
        }
        show({movimiento, index}) {
            $(this.props.ids.modal).modal('show')
            this.info.forEach(info => {
                $(this.props.ids.modal).find(`.${info.className}`).html(info.value(movimiento))
            })
            this.props.editForm.show({modal: $(this.props.ids.modal), movimiento, index})
        }
        hide() {
            $(this.props.ids.modal).modal('hide')
            this.reset()
        }
    }
</script>
