<template>
  <v-container fluid grid-list-lg>
    <v-layout row>
      <v-flex xs3>
        <v-btn color="primary">New Catalog</v-btn>
      </v-flex>
      <v-flex xs9>
      </v-flex>
    </v-layout>

    <v-layout row>
      <v-flex xs7>

        <v-card class="pa-2">
          <v-tabs v-model="activeTab">
            <v-tab key="mine">My Catalogs</v-tab>
            <v-tab key="public">Public Catalogs</v-tab>

            <v-tab-item key="mine">
              <v-card flat>

                <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="headers"
                  :items="myCatalogs"
                  :search="search"
                  :loading="loadingMyCatalogs"
                  disable-initial-sort
                  class="scroll-area"
                >
                  <template v-slot:items="cats">
                    <tr @click="selectCatalog(cats.item.id)">
                      <td>{{ cats.item.seasonCode }}</td>
                      <td>{{ cats.item.name }}</td>
                      <td>{{ cats.item.updatedPretty }}</td>
                    </tr>
                  </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-tab-item key="public">
              <v-card flat>
                <v-card-text>public</v-card-text>
              </v-card>
            </v-tab-item>
          </v-tabs>
        </v-card>

      </v-flex>

      <v-flex xs5>
        <v-card>
          <v-card-text>{{ getSelectedCatalog }} </v-card-text>
        </v-card>
      </v-flex>
    </v-layout>

  </v-container>
</template>

<script>

export default {
  components: {
  },
  data: () => ({
    activeTab: null,
    search: '',
    headers: [
      {
        text: 'Season',
        align: 'left',
        value: 'seasonCode'
      },
      {
        text: 'Name',
        align: 'left',
        value: 'name'
      },
      {
        text: 'Updated',
        value: 'updated'
      },
    ],
  }),
  computed: {
    myCatalogs() {
      return this.$store.getters.getMyCatalogs
    },
    loadingMyCatalogs() {
      return this.$store.getters.getLoadingMyCatalogs
    },
    publicCatalogs() {
      return this.$store.getters.getPublicCatalogs
    },
    loadingPublicCatalogs() {
      return this.$store.getters.getLoadingPublicCatalogs
    },
    getSelectedCatalog() {
      return this.$store.getters.getSelectedCatalog
    },
  },
  methods: {
    selectCatalog: function(id) {
      this.$store.dispatch('setSelectedCatalog', id)
    }
  },
  mounted: function() {
    this.$store.dispatch('loadMyCatalogs')
  }
}
</script>

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