<script>
    class Unidad {
        props = {
            id: 0,
            tipo: '',
            descripcion: '',
            prorrateo: 0,
            propiedad_unidad_id: 0,
            valor: 0
        }

        constructor(props) {
            this.props = props
        }

        changeDescripcion(proporcion = 1) {
            return this.descripcion = [this.props.tipo, this.props.descripcion, `(UF ${facturas.formatters.ufs.format(this.props.valor * proporcion)})`].join(' ')
        }
        update() {
            return {
                precio: newValue => {
                    const url = '{{$urls->api}}/ventas/propiedades/unidad/' + this.props.propiedad_unidad_id + '/edit'
                    const method = 'post'
                    const body = new FormData()
                    body.set('valor', newValue)
                    return fetchAPI(url, {method, body}).then(response => {
                        if (!response) {
                            return
                        }
                        return response.json().then(json => {
                            if (!json.edited) {
                                alert('No se pudo editar la unidad.')
                                return
                            }
                            this.props.valor = parseFloat(json.input.valor)
                        })
                    })
                },
                prorrateo: newValue => {
                    const url = '{{$urls->api}}/ventas/unidad/' + this.props.id + '/prorrateo'
                    const method = 'post'
                    const body = new FormData()
                    body.set('prorrateo', newValue)
                    return fetchAPI(url, {method, body}).then(response => {
                        if (!response) {
                            return
                        }
                        return response.json().then(json => {
                            if (!json.edited) {
                                return
                            }
                            this.props.prorrateo = json.input.prorrateo
                            document.getElementById('prorrateo'+this.props.id).parentElement.parentElement.innerHTML = ''
                        })
                    })
                }
            }
        }
        watch() {
            return {
                unidad: () => {
                    this.watch().precio()
                    this.watch().prorrateo()
                },
                precio: () => {
                    document.getElementById('precio'+this.props.propiedad_unidad_id).addEventListener('change', changeEvent => {
                        const newValue = changeEvent.currentTarget.value
                        if (newValue === this.props.valor) {
                            return
                        }
                        this.update().precio(newValue).then(() => {
                            window.location.reload()
                        })
                    })
                },
                prorrateo: () => {
                    const input = document.getElementById('prorrateo'+this.props.id)
                    if (input === null) {
                        return
                    }
                    input.addEventListener('change', changeEvent => {
                        const newValue = changeEvent.currentTarget.value
                        if (newValue === this.props.prorrateo) {
                            return
                        }
                        this.update().prorrateo(newValue).then(() => {
                            facturas.venta.update().totalUnidades()
                            facturas.draw().facturas()
                        })
                    })
                }
            }
        }
        draw() {
            return {
                precio: () => {
                    return [
                        '<div class="three wide field">',
                        '<label for="precio'+this.props.propiedad_unidad_id+'">Precio<br /> '+this.props.tipo+' '+this.props.descripcion+'</label>',
                        '<div class="ui left labeled input" id="input'+this.props.propiedad_unidad_id+'">',
                        '<div class="ui basic label">UF</div>',
                        '<input class="price" type="text" name="precio'+this.props.propiedad_unidad_id+'" id="precio'+this.props.propiedad_unidad_id+'" data-id="'+this.props.propiedad_unidad_id+'" value="'+this.props.valor+'" />',
                        '</div>',
                        '</div>'
                    ].join("\n")
                },
                prorrateo: () => {
                    const output = []
                    output.push('<div class="three wide field">')
                    if (this.props.prorrateo === 0) {
                        output.push(...[
                            '<label for="prorrateo'+this.props.id+'">Prorrateo<br /> '+this.props.tipo+' '+this.props.descripcion+'</label>',
                            '<div class="ui right labeled input">',
                            '<input class="prorrateo" type="text" id="prorrateo'+this.props.id+'" value="'+this.props.prorrateo+'" />',
                            '<div class="ui basic label">%</div>',
                            '</div>'
                        ])
                    }
                    output.push('</div>')
                    return output.join("\n")
                }
            }
        }
    }
</script>
