<template>
  <div>
    <page-header v-if="pages">PAGES ({{pages.length}})</page-header>

    <v-sheet class="mx-auto pa-4" elevation="1" tile>
      <v-data-table :search="search" :headers="headers" :items="pages" :items-per-page="10">
        <template v-slot:top>
          <v-toolbar flat>
            <v-text-field
              v-model="search"
              class="hidden-sm-and-down"
              hide-details
              flat
              append-icon="mdi-filter"
              placeholder="Filter..."
              light
              outlined
              dense
            ></v-text-field>
            <v-spacer></v-spacer>
            <v-btn depressed to="/manager/pages/new">
              <v-icon small>icon-add</v-icon>
            </v-btn>
          </v-toolbar>
        </template>
        <template v-slot:item.actions="{ item }">
          <v-btn
            color="info"
            class="mr-2"
            small
            dark
            tile
            depressed
            nuxt
            :to="localePath(`/pages/${item.slug}`)"
            target="_blank"
          >
            <v-icon small>mdi-open-in-new</v-icon>
          </v-btn>

          <v-btn
            color="warning"
            class="mr-2"
            small
            dark
            tile
            depressed
            nuxt
            :to="localePath(`/manager/pages/${item.slug}`)"
          >
            <v-icon small>mdi-file-edit</v-icon>
          </v-btn>

          <v-dialog v-model="dialog" persistent max-width="500">
            <template v-slot:activator="{ on }">
              <v-btn color="error" v-on="on" small dark tile depressed>
                <v-icon small>mdi-delete</v-icon>
              </v-btn>
            </template>
            <v-card>
              <v-card-title class="headline">Do you want to delete this page?</v-card-title>
              <v-card-text>Deleting this page you will also delete all the components attached and won't be possible to restore it anymore.</v-card-text>
              <v-card-actions>
                <v-btn color="info" @click="dialog = false" tile depressed>back</v-btn>
                <v-spacer></v-spacer>
                <v-btn color="error" @click="deletePage(item.id)" tile depressed>Yes, Delete</v-btn>
              </v-card-actions>
            </v-card>
          </v-dialog>
        </template>
      </v-data-table>
    </v-sheet>
  </div>
</template>

<script>
import PageHeader from '~/components/UI/PageHeader/PageHeader'

export default {
  layout: `${process.env.CUSTOMER}Admin`,
  components: {
    PageHeader
  },
  data: () => ({
    dialog: false,
    search: '',
    pages: [],
    headers: [
      { text: 'Title', sortable: true, value: 'title' },
      { text: 'Created', value: 'created_at', sortable: true },
      { text: 'Updated', value: 'updated_at', sortable: true },
      { text: 'Actions', value: 'actions', sortable: false }
    ]
  }),

  watch: {
    dialog(val) {
      val || this.close()
    }
  },

  async asyncData({ $axios }) {
    const response = await $axios.get('/pages')
    return { pages: response.data }
  },

  methods: {
    close() {
      this.dialog = false
    },

    save() {
      this.close()
    },

    edit(item) {},

    async deletePage(itemId) {
      try {
        const response = await this.$axios.delete(`/pages/${itemId}`)
        this.pages = this.pages.filter(page => page.id !== itemId)
        this.dialog = false

        this.$notifier.showMessage({
          content: `Page deleted`,
          color: 'success',
          icon: 'mdi-delete'
        })
      } catch (error) {
        console.log('TCL: deletePage -> error', error)
      }
    }
  }
}
</script>