<template>
  <div class="col q-gutter-md">
    <q-list dense>
      <q-item>
        <q-item-section side>
          <q-item-label caption>
            Uploaded by
          </q-item-label>
        </q-item-section>
      </q-item>
      <q-item>
        <q-item-section avatar>
          <div class="text-center">
            <router-link :to="`/users/${project.owner.uid}`">
              <q-avatar size="128px">
                <q-img
                  basic
                  :src="project.owner.avatarURL"
                />
              </q-avatar>
            </router-link>
            <br>
            <div class="text-caption">
              {{ project.owner.name }}
            </div>
          </div>
        </q-item-section>
      </q-item>
    </q-list>

    <q-list>
      <q-item
        clickable
        @click="showDocumentation"
      >
        <q-item-section side>
          <q-icon
            name="book"
            color="teal-3"
          />
        </q-item-section>
        <q-item-section>
          <q-item-label class="text-teal-6 text-weight-bold">
            Documentation
          </q-item-label>
        </q-item-section>
      </q-item>
      <q-item
        clickable
        @click="showDownloads"
      >
        <q-item-section side>
          <q-icon
            name="save"
            color="teal-3"
          />
        </q-item-section>
        <q-item-section class="text-teal-6 text-weight-bold">
          Download files
        </q-item-section>
      </q-item>
      <q-item
        clickable
        @click="handleAddBookmark"
      >
        <q-item-section side>
          <q-icon
            name="bookmark"
            color="teal-3"
          />
        </q-item-section>
        <q-item-section class="text-teal-6 text-weight-bold">
          Add to collection
        </q-item-section>
      </q-item>
    </q-list>

    <q-list>
      <q-item>
        <q-item-section side>
          <q-item-label caption>
            Category
          </q-item-label>
        </q-item-section>
        <q-item-section>
          <q-item-label>
            <router-link :to="`/catalogue/category/${category_link}`">
              {{ category_label }}
            </router-link>
          </q-item-label>
        </q-item-section>
      </q-item>
      <q-item>
        <q-item-section side>
          <q-item-label caption>
            Created
          </q-item-label>
        </q-item-section>
        <q-item-section>
          <q-item-label>{{ formatted_date }}</q-item-label>
        </q-item-section>
      </q-item>
      <q-item v-if="project.tags && project.tags.length > 0">
        <q-item-section side>
          <q-item-label caption>
            Tags
          </q-item-label>
        </q-item-section>
      </q-item>
      <q-item v-if="project.tags && project.tags.length > 0">
        <q-item-section>
          <div class="flex row">
            <router-link
              class="text-caption q-mr-sm"
              style="text-decoration: none"
              v-for="tag in project.tags"
              v-bind:key="tag"
              :to="`/catalogue/tags/${tag}`"
            >#{{tag}}</router-link>
          </div>
        </q-item-section>
      </q-item>
    </q-list>

    <div class="flex row q-gutter-md">
      <q-card
        flat
        class="text-center"
      >
        <q-icon
          size="64px"
          name="star"
          color="grey-3"
        />
        <div class="text-center text-caption">
          Stars
        </div>
        <div class="text-center text-h6 text-grey text-weight-bold">
          0
        </div>
      </q-card>
      <q-card
        flat
        class="text-center"
      >
        <q-icon
          size="64px"
          name="save"
          color="grey-3"
        />
        <div class="text-center text-caption">
          Downloads
        </div>
        <div class="text-center text-h6 text-grey text-weight-bold">
          {{ project.downloadsCount || 0 }}
        </div>
      </q-card>
      <SelectCollectionDialog :show="showSelectCollectionDialog" />
      <q-dialog v-model="showDownloadsDialog">
        <DownloadsDialog
          :downloads="downloads"
          :project="project"
        />
      </q-dialog>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import SelectCollectionDialog from 'src/components/collection/SelectCollectionDialog';
import DownloadsDialog from 'src/components/project/DownloadsDialog';
import { openURL } from 'quasar'
export default {
  // name: 'ComponentName',
  props: ['project', 'downloads'],
  components: { SelectCollectionDialog, DownloadsDialog },
  data () {
    return { showSelectCollectionDialog: false, showDownloadsDialog: false };
  },
  methods: {
    openURL,
    showDocumentation () {
      // this.showDocumentationDialog = true;
      // this.openURL
    },
    searchTag (tag) {
      let _tag = '/catalogue/tags/' + tag
      this.$router.push(_tag)
    },
    searchCategory (category) {
      this.$router.push(`/catalogue/categories/${category}`)
    },
    showDownloads () {
      this.showDownloadsDialog = true;
    },
    handleAddBookmark (key) {
      this.showSelectCollectionDialog = true;
    },
    saveBookmark (collection, project) {
      this.addBookmark(null, null).then(() => {
        this.$q.notify('Bookmark added')
      }).catch((e) => {
        console.log(e)
        this.$q.notify('Some error occurred, please try again later')
      })
    }
  },
  computed: {
    category_label () {
      if (!this.project) return '';
      console.log(this.project.category);
      const cat = this.getCategory(this.project.category);
      return cat ? cat.label : 'No category';
    },
    category_link () {
      if (!this.project) return '';
      return this.project.category
    },
    formatted_date () {
      if (!this.project) return '';
      if (this.project.created) {
        try {
          const createdDate = this.project.created.toDate();
          console.log(createdDate);
          return this.$niceTime(createdDate);
        } catch {
          return '';
        }
      }
      return '';
    },

    ...mapGetters({ getCategory: 'categories/categoryByName' })
  }
};
</script>