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

    <v-row>
      <v-col cols="8">

        <v-card>
          <v-tabs v-model="activeTab"
                  color="keen_dark_grey"
                  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-card text>

                <v-card-title>
                  <v-spacer></v-spacer>
                  <v-text-field
                    v-model="search"
                    append-icon="search"
                    label="Search"
                    single-line
                    hide-details
                  ></v-text-field>
                </v-card-title>

                <v-data-table
                  :headers="myHeaders"
                  :items="myCatalogs"
                  :items-per-page="15"
                  :search="search"
                  :loading="loadingMyCatalogs"
                  @click:row="selectCatalog"
                  class="scroll-area"
                >
                  <template v-slot:item.master="{ item }">
                    <v-tooltip top v-if="item.master">
                      <template v-slot:activator="{ on }">
                        <v-icon small color="red" v-on="on">stars</v-icon>
                      </template>
                      <span>Season master</span>
                    </v-tooltip>
                  </template>

                  <template v-slot:item.updated="{ item }">
                    {{ item.updatedPretty }}
                  </template>

                  <template v-slot:item.build_progress="{ item }">
                    <PDFProgress :percentDone="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-card>
            </v-tab-item>

            <!-- public catalogs -->
            <v-tab-item key="public">
              <v-card text>

                <v-card-title>
                  <v-spacer></v-spacer>
                  <v-text-field
                    v-model="search"
                    append-icon="search"
                    label="Search"
                    single-line
                    hide-details
                  ></v-text-field>
                </v-card-title>

                <v-data-table
                  :headers="pubHeaders"
                  :items="publicCatalogs"
                  :items-per-page="15"
                  :search="search"
                  :loading="loadingPublicCatalogs"
                  @click:row="selectCatalog"
                  class="scroll-area"
                >
                  <template v-slot:item.master="{ item }">
                    <v-tooltip top v-if="item.master">
                      <template v-slot:activator="{ on }">
                        <v-icon small color="red" v-on="on">stars</v-icon>
                      </template>
                      <span>Season master</span>
                    </v-tooltip>
                  </template>

                  <template v-slot:item.updated="{ item }">
                    {{ item.updatedPretty }}
                  </template>

                  <template v-slot:item.build_progress="{ item }">
                    <PDFProgress :percentDone="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-card>
            </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></v-divider>
          <table class="details">
            <tr v-if="selectedCatalog.master">
              <td class="grey--text">Season master</td>
              <td><span class="group"><v-icon color="red">stars</v-icon></span></td>
            </tr>
            <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 :percentDone="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: '',
        align: 'center',
        value: 'master',
        width: '1%',
        class: 'pa-0',
      },
      {
        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: '',
        align: 'center',
        value: 'master',
        width: '1%',
        class: 'pa-0',
      },
      {
        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: '20%',
        class: 'px-2 py-0',
      },
      {
        text: '',
        value: 'build_progress',
        class: 'px-2 py-0',
        width: '50px',
      },
    ],
  }),
  computed: {
    ...mapState([
      'myCatalogs',
      'loadingMyCatalogs',
      'publicCatalogs',
      'loadingPublicCatalogs',
      'selectedCatalog',
    ]),
  },
  methods: {
    ...mapActions([
      'setSelectedCatalog',
      'loadMyCatalogs',
      'loadPublicCatalogs',
    ]),
    selectCatalog(cat) {
      this.setSelectedCatalog(cat.id)
    },
  },
  mounted: function() {
    this.loadMyCatalogs()
    this.loadPublicCatalogs()
    this.interval = setInterval(() => {
      this.loadMyCatalogs()
      this.loadPublicCatalogs()
    }, 10000)
  }
}
</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>
