<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="searchString"/>
                    </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-if="!deshabilitado" @click="submit">Crear nuevo pedido
                </button>
            </div>
        </div>
        <div v-if="pedidos.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 pedidos"
                 :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="elegirPedido({ pedido: subpedidoExistente })">Continuar pedido
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

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

export default {
    name: 'SubpedidoSelect',
    async mounted() {
        await this.getGrupoDeCompra();
    },
    data() {
        return {
            searchString: null
        }
    },
    computed: {
        ...mapState('barrio',["grupo_de_compra_id","pedidos"]),
        ...mapState('pedido',["nombre","pedido_id"]),
        deshabilitado: function () {
            return !this.searchString?.trim()
                || this.pedidos.some(p => p.nombre.toLowerCase() === this.searchString.toLowerCase())
        }
    },
    methods: {
        ...mapActions('barrio',["getGrupoDeCompra","getPedidos"]),
        ...mapActions('pedido',["crearPedido","elegirPedido"]),
        ...mapMutations('barrio',["setPedidos"]),
        onType() {
            if (!this.searchString) {
                this.setPedidos([]);
                return;
            }
            this.getPedidos(this.searchString);
        },
        async submit() {
            await this.crearPedido({ nombre: this.searchString, grupo_de_compra_id: this.grupo_de_compra_id });
        },
    }
}
</script>