<template>
    <div :class="show_modal_barrio ? 'is-active modal' : 'modal'">
        <div class="modal-background"></div>
        <div class="modal-card">
            <header class="modal-card-head">
                <p class="modal-card-title">{{ titulo }}</p>
                <button class="delete" aria-label="close" @click.capture="cerrar"></button>
            </header>
            <section class="modal-card-body">
                <div class="field has-addons is-centered is-thin-centered">
                    <p class="control">
                        Nombre:
                        <input id="notasControl" class="input" type="text" v-model="nombreControl">
                    </p>
                </div>
                <div class="field has-addons is-centered is-thin-centered">
                    <p class="control">
                        Region:
                        <input id="notasControl" class="input" type="text" v-model="regionControl">
                    </p>
                </div>
                <div class="field has-addons is-centered is-thin-centered">
                    <p class="control">
                        Contraseña pedidos:
                        <input id="notasControl" class="input" type="text" v-model="passBarrio">
                    </p>
                </div>
                <div class="field has-addons is-centered is-thin-centered">
                    <p class="control">
                        Contraseña admin:
                        <input id="notasControl" class="input" type="text" v-model="passAdmin">
                    </p>
                </div>
                <div class="field has-addons is-centered is-thin-centered">
                    <p class="control">
                        Contraseña ollas:
                        <input id="notasControl" class="input" type="text" v-model="passOllas">
                    </p>
                </div>
            </section>
            <footer class="modal-card-foot is-justify-content-right">
                <button class="button" @click="cerrar">Cancelar</button>
                <button class="button is-success" @click="confirmar">Aceptar</button>
            </footer>
        </div>
    </div>
</template>

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

export default {
    name: 'ModalBarrio',
    data() {
        return {
            nombreControl: "",
            regionControl: "",
            passBarrio: "",
            passAdmin: "",
            passOllas: "",
        }
    },
    computed: {
        ...mapState('ui', ["show_modal_barrio"]),
        ...mapState('comisiones', ["grupo_de_compra_actual", "grupo_de_compra_nuevo"]),
        titulo() {
            return this.grupo_de_compra_nuevo ? "Agregar barrio" : "Modificar barrio";
        }
    },
    methods: {
        ...mapMutations("comisiones", ["seleccionarGrupoDeCompra"]),
        ...mapMutations('ui', ["toggleModalBarrio"]),
        ...mapActions("comisiones", ["modificarBarrio", "crearBarrio"]),
        ...mapActions('ui', ["toast", "error"]),
        async confirmar() {
            if (this.grupo_de_compra_nuevo)
                await this.crear();
            else
                await this.modificar();
            this.cerrar();
        },
        async crear() {
            await this.crearBarrio({
                nombre: this.nombreControl,
                region: this.regionControl,
                passBarrio: this.passBarrio,
                passAdmin: this.passAdmin,
                passOllas: this.passOllas
            });
        },
        async modificar() {
            const nombre = this.nombreControl !== this.grupo_de_compra_actual.nombre ? this.nombreControl : undefined;
            const region = this.regionControl !== this.grupo_de_compra_actual.region ? this.regionControl : undefined;
            await this.modificarBarrio({
                gdc_id: this.grupo_de_compra_actual.id,
                nombre: nombre,
                region: region,
                passBarrio: this.passBarrio,
                passAdmin: this.passAdmin,
                passOllas: this.passOllas,
            })
        },
        cerrar() {
            this.toggleModalBarrio();
            this.seleccionarGrupoDeCompra({ grupoDeCompra: false });
        },
    },
    mounted() {
        this.nombreControl = this.grupo_de_compra_actual.nombre;
        this.regionControl = this.grupo_de_compra_actual.region;
    }
}
</script>
