<template>
    <v-col cols="12">
        <v-data-table
            :headers="headers"
            :items="notes"
            :loading="loading"
            loading-text="Loading notes..."
            class="elevation-1"
            disable-sort
        >
            <template v-slot:top>
                <v-toolbar flat color="secondary">
                    <h2 class="title white--text">
                        Notes
                    </h2>
                    <v-spacer></v-spacer>
                    <v-btn to="/create" outlined dark>
                        New Note
                    </v-btn>
                </v-toolbar>
            </template>
            <template v-slot:item.updatedAt="{ item }">
                {{ format(item.updatedAt) }}
            </template>
            <template v-slot:item.tags="{ item }">
                <div class="tags">
                    <v-chip
                        v-for="tag in item.tags"
                        :key="tag"
                        active
                        color="secondary"
                    >
                        {{ tag }}
                    </v-chip>
                </div>
            </template>
            <template v-slot:item.actions="{ item }">
                <v-icon
                    small
                    color="secondary"
                    dark
                    class="mr-2"
                    @click="editItem(item)"
                >
                    mdi-eye
                </v-icon>
                <v-icon
                    small
                    color="secondary"
                    dark
                    class="mr-2"
                    @click="editItem(item)"
                >
                    mdi-pencil
                </v-icon>
                <v-icon small color="secondary" dark @click="deleteItem(item)">
                    mdi-delete
                </v-icon>
            </template>
            <template v-slot:no-data>
                <v-btn color="primary" @click="initialize">Reset</v-btn>
            </template>
        </v-data-table>
    </v-col>
</template>

<script>
import { format } from 'timeago.js'

export default {
    name: 'Notes',
    title: 'Notes',
    data: () => ({
        loading: true,
        notes: [],
        headers: [
            { text: 'Title', align: 'start', value: 'title' },
            { text: 'Last updated', value: 'updatedAt', align: 'end' },
            { text: 'Tags', value: 'tags' },
            { text: 'Actions', value: 'actions' },
        ],
    }),
    mounted() {
        this.loadNotes()
    },
    methods: {
        async loadNotes() {
            await this.$axios
                .get('/notes')
                .then((e) => {
                    this.notes = e.data
                    this.loading = false
                })
                .catch((_) => {})
        },
        editItem(item) {},
        async deleteItem(item) {
            try {
                await this.$axios.delete(`/notes/${item.uuid}`)
            } catch (_) {
            } finally {
                await this.loadNotes()
            }
        },
        format,
    },
}
</script>

<style scoped>
.tags {
    padding: 16px;
}

.tags .v-chip {
    margin: 4px 8px 4px 0;
}

.v-card.hover {
    cursor: pointer;
}
</style>
