<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-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>{{ category_label }}</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="row">
            <q-chip
              dense
              v-for="tag,idx in project.tags"
              :key="tag"
              :label="tag"
            />
          </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>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
  // name: 'ComponentName',
  props: ['project'],
  data () {
    return {};
  },
  methods: {
    showDocumentation () { },
    showDownloads () { }
  },
  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';
    },
    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>