<template>
    <div>
        <div class="field has-addons contador">
            <div class="control">
                <button class="button is-small" @click.capture="decrementar();">
                    <i class="fa fa-solid fa-minus"></i>
                </button>
            </div>
            <div class="control">
                <input id="cantidad" v-model="cantidadControl" class="input is-small" type="number"
                       style="text-align: center">
            </div>
            <div class="control" @click="incrementar();">
                <button class="button is-small">
                    <i class="fa fa-solid fa-plus"></i>
                </button>
            </div>
            <button :disabled="!hayCambios" class="button is-small is-success ml-1" @click="confirmar()">
                <span class="icon">
                    <i class="fas fa-check"></i>
                </span>
            </button>
            <button :disabled="!puedeBorrar" class="button is-small is-danger ml-1" @click="borrar()">
                <span class="icon">
                    <i class="fas fa-trash-alt"></i>
                </span>
            </button>
        </div>
        <div v-if="requiere_notas" :class="{'has-icons-right': notas_warning_visible}"
             class="control is-full-width has-icons-left">
            <span class="icon is-small is-left">
                <i class="fas fa-sticky-note"></i>
            </span>
            <input v-model="notasControl" v-bind:class="{'is-danger': notas_warning_visible}" id="notas" class="input" type="text" placeholder="Talle o color"/>
            <span v-if="notas_warning_visible" class="icon is-small is-right">
                <i class="fas fa-exclamation-triangle"></i>
            </span>
            <article v-if="notas_warning_visible" class="message is-danger is-small">
                <div class="message-body">
                    No se puede dejar este campo vac&iacute;o
                </div>
            </article>
        </div>
    </div>
</template>

<script>
import { mapActions, mapGetters } from "vuex";

export default {
    props: {
        producto_id: {
            type: Number,
            required: true,
        },
        requiere_notas: {
            type: Number,
            required: true,
        }
    },
    data() {
        return {
            cantidadControl: 0,
            notasControl: '',
            notas_warning_visible: false,
        }
    },
    watch: {
        cantidadEnChismosa() {
            this.actualizar();
        },
        notasEnChismosa() {
            this.actualizar();
        }
    },
    mounted() {
        this.actualizar();
    },
    computed: {
        ...mapGetters('pedido', ["enChismosa", "cantidad", "notas"]),
        cantidadEnChismosa() {
            return this.cantidad(this.producto_id);
        },
        notasEnChismosa() {
            return this.notas(this.producto_id);
        },
        hayCambios() {
            return this.cantidadControl !== this.cantidadEnChismosa || this.notasControl !== this.notasEnChismosa;
        },
        puedeBorrar() {
            return this.enChismosa(this.producto_id);
        },
        faltaNotas() {
            return this.requiere_notas && this.cantidadControl > 0 && !this.notasControl;
        },
    },
    methods: {
        ...mapActions('pedido', ["modificarChismosa"]),
        decrementar() {
            this.cantidadControl -= 1;
        },
        incrementar() {
            this.cantidadControl += 1;
        },
        borrar() {
            this.cantidadControl = 0;
            this.confirmar();
        },
        async confirmar() {
            if (this.faltaNotas) {
                this.notas_warning_visible = true;
                return;
            }
            await this.modificarChismosa({
                producto_id: this.producto_id,
                cantidad: this.cantidadControl,
                notas: this.notasControl
            });
        },
        actualizar() {
            this.cantidadControl = this.cantidadEnChismosa;
            this.notasControl = this.notasEnChismosa;
        },
    }
}
</script>

<style>
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    appearance: textfield;
    -moz-appearance: textfield;
}

.contador {
    min-width: 178px;
}

.is-danger {
    background-color: #fca697;
}

.is-danger::placeholder {
    color: #fff;
    opacity: 1; /* Firefox */
}
</style>