<template>
  <v-container fluid>
    <v-row>
      <v-col cols="3" class="px-5 py-2">
        <v-btn color="primary"
               class="black--text"
               href="/catalog/new"
        >New Catalog</v-btn>
      </v-col>
      <v-col cols="9"/>
    </v-row>

    <v-row class="px-2">
      <v-col cols="8">

        <v-card>
          <v-tabs v-model="activeTab"
                  color="black"
                  background-color="keen_light_grey"
                  slider-color="keen_dark_grey">
            <v-tab key="mine">My Catalogs</v-tab>
            <v-tab key="public">Public Catalogs</v-tab>

            <!-- my catalogs -->
            <v-tab-item key="mine">
              <v-row>
                <v-col cols="7"/>
                <v-col cols="5" class="px-8">
                  <v-text-field
                    v-model="search"
                    append-icon="search"
                    label="Search"
                    single-line
                    hide-details
                  />
                </v-col>
              </v-row>

              <v-row>
                <v-col>
                  <v-data-table
                    :headers="myHeaders"
                    :items="myCatalogs"
                    :items-per-page="10"
                    :search="search"
                    :loading="loadingMyCatalogs"
                    class="scroll-area"
                    @click:row="selectCatalog"
                  >
                    <template v-slot:item.updated="{ item }">
                      {{ item.updatedPretty }}
                    </template>

                    <template v-slot:item.build_progress="{ item }">
                      <PDFProgress :percent-done="item.build_progress" />
                    </template>

                    <template v-slot:no-results>
                      No catalogs match "{{ search }}"
                    </template>

                    <template v-slot:no-data>
                      No Catalogs
                    </template>
                  </v-data-table>
                </v-col>
              </v-row>
            </v-tab-item>

            <!-- public catalogs -->
            <v-tab-item key="public">
              <v-row>
                <v-col cols="7"/>
                <v-col cols="5" class="px-8">
                  <v-text-field
                    v-model="search"
                    append-icon="search"
                    label="Search"
                    single-line
                    hide-details
                  />
                </v-col>
              </v-row>

              <v-row>
                <v-col>
                  <v-data-table
                    :headers="pubHeaders"
                    :items="publicCatalogs"
                    :items-per-page="10"
                    :search="search"
                    :loading="loadingPublicCatalogs"
                    class="scroll-area"
                    @click:row="selectCatalog"
                  >
                    <template v-slot:item.updated="{ item }">
                      {{ item.updatedPretty }}
                    </template>

                    <template v-slot:item.build_progress="{ item }">
                      <PDFProgress :percent-done="item.build_progress" />
                    </template>

                    <template v-slot:no-results>
                      No catalogs match "{{ search }}"
                    </template>

                    <template v-slot:no-data>
                      No Catalogs
                    </template>
                  </v-data-table>
                </v-col>
              </v-row>
            </v-tab-item>
          </v-tabs>
        </v-card>
      </v-col>

      <v-col cols="4">
        <v-card v-if="selectedCatalog">
          <v-toolbar dense color="keen_light_grey" class="elevation-0">
            <v-toolbar-title color="primary" class="headline">
              {{ selectedCatalog.name }}
            </v-toolbar-title>
          </v-toolbar>
          <v-divider/>
          <table class="details">
            <tr>
              <td class="grey--text">Season</td>
              <td>{{ selectedCatalog.seasonCode }}</td>
            </tr>
            <tr>
              <td class="grey--text">Region</td>
              <td>{{ selectedCatalog.regionCode }}</td>
            </tr>
            <tr>
              <td class="grey--text">Owner</td>
              <td>{{ selectedCatalog.ownerName }}</td>
            </tr>
            <tr>
              <td class="grey--text">Created</td>
              <td>{{ selectedCatalog.createdPretty }}</td>
            </tr>
            <tr>
              <td class="grey--text">Updated</td>
              <td>{{ selectedCatalog.updatedPretty }}</td>
            </tr>
            <tr>
              <td class="grey--text">Pages</td>
              <td>{{ selectedCatalog.pages }}</td>
            </tr>
            <tr>
              <td class="grey--text">Sections</td>
              <td>{{ selectedCatalog.sections }}</td>
            </tr>
            <tr>
              <td class="grey--text">Materials</td>
              <td>{{ selectedCatalog.materials }}</td>
            </tr>
            <tr v-if="selectedCatalog.public">
              <td class="grey--text">Public</td>
              <td>
                <span class="group"><v-icon color="blue">group</v-icon></span></td>
            </tr>
            <tr v-if="selectedCatalog.show_prices">
              <td class="grey--text">Show prices</td>
              <td>
                <span class="group"><v-icon color="green">monetization_on</v-icon></span></td>
            </tr>
            <tr v-if="selectedCatalog.build_progress < 100">
              <td class="grey--text">PDF Build</td>
              <td>
                <PDFProgress :percent-done="selectedCatalog.build_progress" />
              </td>
            </tr>
          </table>

          <v-card-text>
            <v-btn small outlined class="ma-2"
                   :href="'/catalog/edit/' + selectedCatalog.id"
            >Edit</v-btn>
            <v-btn small outlined class="ma-2"
                   :disabled="selectedCatalog.build_progress < 100"
                   :href="selectedCatalog.pdf"
            >Download</v-btn>
            <!-- <v-btn class="ma-0" small text>Share</v-btn> -->
          </v-card-text>
        </v-card>
        <v-card v-else>
          <v-card-text class="grey--text">No catalog selected</v-card-text>
        </v-card>
      </v-col>
    </v-row>

  </v-container>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import PDFProgress from './PDFProgress'

export default {
  components: {
    PDFProgress,
  },
  data: () => ({
    activeTab: null,
    search: '',
    interval: null,
    myHeaders: [
      {
        text: 'Season',
        value: 'seasonCode',
        width: '1%',
        class: 'px-2 py-0',
      },
      {
        text: 'Name',
        value: 'name',
        width: '55%',
        class: 'px-2 py-0',
      },
      {
        text: 'Updated',
        value: 'updated',
        class: 'px-2 py-0',
      },
      {
        text: '',
        value: 'build_progress',
        class: 'px-2 py-0',
        width: '50px',
      },
    ],
    pubHeaders: [
      {
        text: 'Season',
        align: 'left',
        value: 'seasonCode',
        width: '1%',
        class: 'px-2 py-0',
      },
      {
        text: 'Owner',
        align: 'left',
        value: 'ownerName',
        width: '15%',
        class: 'px-2 py-0',
      },
      {
        text: 'Name',
        align: 'left',
        value: 'name',
        width: '40%',
        class: 'px-2 py-0',
      },
      {
        text: 'Updated',
        value: 'updated',
        width: '25%',
        class: 'px-2 py-0',
      },
      {
        text: '',
        value: 'build_progress',
        class: 'px-2 py-0',
        width: '50px',
      },
    ],
  }),
  computed: {
    ...mapState([
      'myCatalogs',
      'loadingMyCatalogs',
      'publicCatalogs',
      'loadingPublicCatalogs',
      'selectedCatalog',
    ]),
  },
  mounted: function() {
    this.loadMyCatalogs()
    this.loadPublicCatalogs()
    this.interval = setInterval(() => {
      this.loadMyCatalogs()
      this.loadPublicCatalogs()
    }, 10000)
  },
  methods: {
    ...mapActions([
      'setSelectedCatalog',
      'loadMyCatalogs',
      'loadPublicCatalogs',
    ]),
    selectCatalog(cat) {
      this.setSelectedCatalog(cat.id)
    },
  },
}
</script>

<style scoped>
/*
.scroll-area {
  height: 300px;
  overflow-y: auto;
}
*/
</style>

<style>
.theme--light.application {
  background-color: #e1e1e1;
}

table.details tr td:first-child {
  padding: 5px 5px 5px 15px;
  text-align: right;
}

table.details tr td {
  padding: 5px;
}

</style>
