<template>
    <v-container grid-list-xl>
        <v-layout row wrap>

            <v-flex md6>


                <v-card class="mb-3" v-for="(item, index) in listaTareas" :key="index">
                    <v-card-text>
                        <v-chip label color="pink" text-color="white" class="ml-0">
                            <v-icon left>label</v-icon>
                            {{item.titulo}}
                        </v-chip>
                        <p>{{item.desc}}</p>
                        <v-btn color="warning" class="ml-0" @click="editar(index)">Editar</v-btn>
                        <v-btn color="error" class="ml-0" @click="eliminarTarea(item.id)">Eliminiar</v-btn>
                    </v-card-text>
                </v-card>

            </v-flex>

            <v-flex md6 v-if="formAgregar">
                <v-card class="mb-3 pa-3">
                    <v-form @submit.prevent="agregarTarea">
                        <v-text-field label="Titulo de la tarea" v-model="titulo"></v-text-field>
                        <v-textarea label="Descripción de la tarea" v-model="desc"></v-textarea>
                        <v-btn block color="success" type="submit">Agregar Tarea</v-btn>
                    </v-form>
                </v-card>
            </v-flex>

            <v-flex md6 v-if="!formAgregar">
                <v-card class="mb-3 pa-3">
                    <v-form @submit.prevent="editarTarea">
                        <v-text-field label="Titulo de la tarea" v-model="titulo"></v-text-field>
                        <v-textarea label="Descripción de la tarea" v-model="desc"></v-textarea>
                        <v-btn block color="warning" type="submit">Editar Tarea</v-btn>
                    </v-form>
                </v-card>
            </v-flex>

        </v-layout>

        <v-snackbar
            v-model="snackbar"
        >
            {{ mensaje }}
        <v-btn
            color="pink"
            flat @click="snackbar = false"
        >
                Close
            </v-btn>
        </v-snackbar>

    </v-container>
</template>

<script>
    export default {
        data() {
            return {
                listaTareas: [{
                        id: 1,
                        titulo: 'Titulo Tarea #1',
                        desc: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis, maiores?'
                    },
                    {
                        id: 2,
                        titulo: 'Titulo Tarea #2',
                        desc: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis, maiores?>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis, maiores?'
                    }
                ],
                titulo: '',
                desc: '',
                snackbar: false,
                mensaje: '',
                formAgregar: true,
                indexTarea: ''
            }
        },
        methods: {
            agregarTarea(){
                console.log(this.titulo, this.desc)
                if (this.titulo === '' || this.desc === '') {
                    this.snackbar = true
                    this.mensaje = 'Debes llenar todos los campos!'
                } else {
                    this.listaTareas.push({
                        id: Date.now(),
                        titulo: this.titulo,
                        desc: this.desc
                    })
                    this.titulo = ''
                    this.desc = ''
                    this.snackbar = true
                    this.mensaje = 'Tarea Agregada con exito!'
                }
            },
            eliminarTarea(id){
                this.listaTareas = this.listaTareas.filter(e => e.id != id)
            },
            editar(index) {
                this.formAgregar = false
                this.titulo = this.listaTareas[index].titulo
                this.desc = this.listaTareas[index].desc
                this.indexTarea = index
            },
            editarTarea(){
                this.listaTareas[this.indexTarea].titulo = this.titulo
                this.listaTareas[this.indexTarea].desc = this.desc
                this.formAgregar = true
                this.titulo = ''
                this.desc = ''
                this.snackbar = true
                this.mensaje = 'Tarea editada con exito!'
            }
        }
    }
</script>