<template>
    <v-col cols="12">
        <v-data-table
            :headers="headers"
            :items="notes"
            :loading="loading"
            loading-text="Loading notes..."
            class="elevation-1"
            :footer-props="{
                showFirstLastPage: false,
                prevIcon: mdiChevronLeft,
                nextIcon: mdiChevronRight,
            }"
        >
            <template v-slot:top>
                <v-toolbar flat color="secondary">
                    <h2 class="title white--text">
                        Notes
                    </h2>
                    <v-spacer></v-spacer>
                    <v-btn outlined dark @click="test">
                        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
                    aria-label="See Note"
                    small
                    color="secondary"
                    dark
                    class="mr-2"
                    @click="editItem(item)"
                >
                    {{ mdiEye }}
                </v-icon>
                <v-icon
                    aria-label="Edit Note"
                    small
                    color="secondary"
                    dark
                    class="mr-2"
                    @click="editItem(item)"
                >
                    {{ mdiPencil }}
                </v-icon>
                <v-icon
                    aria-label="Delete Note"
                    small
                    color="secondary"
                    dark
                    @click="deleteNote(item)"
                >
                    {{ mdiDelete }}
                </v-icon>
            </template>
            <template v-slot:no-data>
                <span>No notes yet</span>
            </template>
        </v-data-table>
    </v-col>
</template>

<script>
import { format } from 'timeago.js'
import { mapState, mapActions } from 'vuex'
import {
    mdiEye,
    mdiPencil,
    mdiDelete,
    mdiChevronLeft,
    mdiChevronRight,
} from '@mdi/js'

export default {
    name: 'Notes',
    data: () => ({
        mdiEye,
        mdiPencil,
        mdiDelete,
        mdiChevronLeft,
        mdiChevronRight,
        loading: true,
        headers: [
            { text: 'Title', align: 'start', value: 'title' },
            { text: 'Last updated', value: 'updatedAt', align: 'end' },
            { text: 'Tags', value: 'tags' },
            { text: 'Actions', value: 'actions' },
        ],
    }),
    computed: {
        ...mapState('notes', { notes: (state) => state.notes }),
    },
    mounted() {
        this.$store.dispatch('notes/load').then(() => (this.loading = false))
    },
    methods: {
        ...mapActions({
            deleteNote: 'notes/delete',
            createNote: 'notes/create',
        }),
        editItem(item) {},
        test() {
            this.createNote({
                title: 'title',
                tags: [],
                chapters: [],
            })
        },
        format,
    },
    head: () => ({
        title: 'My notes',
    }),
}
</script>

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

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

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