<template>
    <div class="p-4">
        <div v-if="modal" class="modal-container" @click="modal = ! modal"></div>
        <div v-if="modal" class="modal px-2">
            <p class="m-2 text-center">Add a new to-do list ?</p>
            <InputField name="name" label="Title" placeholder="Your Title" required @update:field="name = $event" :errors="errors" classes="border" />
            <div class="flex justify-center mx-2 my-4">
                <button class="btn mr-2" @click="modal = ! modal">Cancel</button>
                <button class="btn-primary" @click="create">Create</button>
            </div>
        </div>
        <div class="flex justify-between mb-1">
            <router-link to="/" class="btn">Back</router-link>

            <a href="#" class="btn-primary" @click="modal = ! modal">Add New List</a>
        </div>
        <Loader v-if="loading" />
        <div v-else class="flex flex-wrap -m-2 mt-2">
            <div v-if="toDoLists.length < 1" class="font-bold p-2">No List Yet</div>
            <router-link v-else
                      v-for="(toDoList, index) in toDoLists"
                      :key="index"
                      :to="'/to-do-lists/' + toDoList.data.to_do_list_id"
                      :to-do-list="toDoList"
                      class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4" >
                <div class="bg-gray-300 rounded text-black m-2 p-2">
                    <div class="flex justify-between">
                        <span class="font-bold">{{ toDoList.data.attributes.data.name }}</span>
                        <span>
                            {{ toDoList.data.attributes.data.to_dos.to_dos_count_check }} / {{ toDoList.data.attributes.data.to_dos.to_dos_count }}
                        </span>
                    </div>
                </div>
            </router-link>
        </div>
    </div>
</template>

<script>
import Loader from '../../components/Loader'
import InputField from '../../components/InputField'

export default {
    name: 'ToDoListIndex',
    components: {
        Loader, InputField
    },
    data: function () {
        return {
            loading: true,
            modal: false,
            toDoLists: null,
            name: '',
            errors: null,
        }
    },
    mounted() {
        // eslint-disable-next-line no-undef
        axios.get('/api/to-do-lists')
            .then(res => {
                this.toDoLists = res.data.data
                this.loading = false
            })
            .catch(errorRes => {
                this.loading = false
                if (errorRes.response.status === 404) {
                    this.$router.push('/')
                }
            })
    },
    methods: {
        create: function () {
            // eslint-disable-next-line no-undef
            axios.post('/api/to-do-lists', {name: this.name})
                .then(res => {
                    console.log(res)
                    this.modal = false
                    this.name = ''
                    this.toDoLists.push(res.data)
                })
                .catch(errorRes => {
                    console.log('Internal Error, Unable to delete contact.' + errorRes)
                })
        }
    }
}
</script>
