<template>
    <div>
        <label class="label">Escribí el nombre de tu familia o grupo de convivencia</label>
        <div class="columns">
            <div class="column is-two-thirds">
                <div class="field">
                    <div class="control">
                        <input class="input" @input="onType" v-model="subpedido"/>
                    </div>
                    <p class="help">Debe ser claro para que tus compas del barrio te identifiquen.</p>
                </div>
            </div>
            <div class="column is-one-third buttons">
                <button class="button is-danger" v-show="!botonCrearDesabilitado" @click="submit">Crear nuevo pedido
                </button>
            </div>
        </div>
        <div v-if="subpedidosExistentes.length" class="block">
            <label class="label">Si ya comenzaste a hacer tu pedido este mes, elegilo en esta lista:</label>
            <p class="help">Podés seguir escribiendo en el campo de arriba para refinar la búsqueda.</p>
            <div class="columns is-mobile" v-for="(subpedidoExistente, index) in subpedidosExistentes"
                 :class="{'has-background-grey-lighter': index % 2}" :key="index">
                <div class="column is-half-mobile is-two-thirds-desktop is-two-thirds-tablet">
                    <p style="padding-top: calc(.5em - 1px); margin-bottom: .5rem"
                       v-text="subpedidoExistente.nombre"></p>
                </div>
                <div class="buttons column is-half-mobile is-one-third-desktop is-one-third-tablet">
                    <button class="button is-danger" @click="elegirSubpedido(subpedidoExistente)">Continuar pedido
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

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

export default {
    data() {
        return {
            subpedido: null,
            subpedidosExistentes: []
        }
    },
    computed: {
        ...mapState('barrio',["grupo_de_compra_id"]),
        nombresDeSubpedidos: function () {
            return this.subpedidosExistentes.map(a => a.nombre.toLowerCase())
        },
        botonCrearDesabilitado: function () {
            return !this.subpedido || this.nombresDeSubpedidos.includes(this.subpedido.toLowerCase())
        }
    },
    async mounted() {
        await this.getGrupoDeCompra();
    },
    methods: {
        ...mapActions('barrio',["getGrupoDeCompra"]),
        onType() {
            if (!this.subpedido) {
                this.subpedidosExistentes = [];
                return;
            }
            axios.get("/api/subpedidos", {
                params: {
                    nombre: this.subpedido,
                    grupo_de_compra: this.grupo_de_compra_id
                }
            }).then(response => {
                this.subpedidosExistentes = response.data
            });
        },
        submit() {
            axios.post("/api/subpedidos", {
                nombre: this.subpedido,
                grupo_de_compra_id: this.grupo_de_compra_id
            }).then(response => {
                //se creo el subpedido
                this.elegirSubpedido(response.data);
            });
        },
        elegirSubpedido(subpedido) {
            //lo guardamos en sesion
            this.guardarSubpedidoEnSesion(subpedido);
        },
        guardarSubpedidoEnSesion(subpedido) {
            axios.post("/subpedidos/guardar_sesion", {
                subpedido: subpedido,
                grupo_de_compra_id: this.grupo_de_compra_id
            }).then(_ => {
                Event.$emit('obtener-sesion')
                window.location.href = 'productos';
            });
        }
    }
}
</script>