<template>
  <q-page padding>
    <h4 class="q-mt-none">Tâches</h4>

    <q-list bordered separator class="rounded-borders">
      <q-item clickable
              v-for="issue in issues"
              :key="issue.id"
              @click="showHistory = true;selectedHistory = issue"
      >
        <q-item-section avatar>
          <q-icon name="task"
                  :color="issue.solved_at ? 'green' : 'grey'"
          />
        </q-item-section>
        <q-item-section top thumbnail class="q-ml-none" style="margin:-8px 0 -8px -16px">
          <img
            :src="getImageUrl(issue, issue.image_file, true)"
            alt="photo"
            style="object-fit: cover;height:100%"
            v-if="issue.image_file"
          />
        </q-item-section>
        <q-item-section>
          <q-item-label lines="3" v-html="issue.text.split('\n').join('</br>')"></q-item-label>
          <q-item-label caption>
            <span class="text-secondary">{{ issue.item.type }} / </span>
            <span class="text-secondary q-mr-sm">{{ issue.item.name }}</span>
            <span v-if="issue.item.ref">#{{ issue.item.ref }}</span>
          </q-item-label>
          <q-item-label caption>
            <span class="text-capitalize">{{ issue.user }}</span>
            <template v-if="issue.solved_at">
              <q-icon name="arrow_right" size="sm"/>
              fait par <span class="text-capitalize">{{ issue.solved_by }}</span> le {{ getDate(issue.solved_at) }}
            </template>
          </q-item-label>
        </q-item-section>
        <q-item-section side top>
          <q-item-label caption>{{ getDate(issue.created) }}</q-item-label>
        </q-item-section>
      </q-item>
    </q-list>

    <q-dialog v-model="showHistory">
      <q-card>
        <q-img :src="getImageUrl(selectedHistory, selectedHistory.image_file)"
                alt="photo"
               fit="cover"
             v-if="selectedHistory.image_file"
        />
        <q-card-section>
          <div v-html="selectedHistory.text.split('\n').join('</br>')"></div>
          <div class="text-caption text-grey">
            <q-btn no-caps
                   icon="exit_to_app"
                   color="secondary"
                   class="q-mt-sm"
                   :to="`/item/${selectedHistory.ref}`">
              <span class="q-ml-md">{{ selectedHistory.item.type }} / </span>
              <span class="q-mx-sm">{{ selectedHistory.item.name }}</span>
              <span v-if="selectedHistory.item.ref">#{{ selectedHistory.item.ref }}</span>
            </q-btn>
            <q-separator class="q-my-md"/>
            <span class="text-capitalize q-mr-sm">{{ selectedHistory.user }}</span>
            <template v-if="selectedHistory.solved_at">
              <q-icon name="arrow_right" size="sm"/>
              fait par <span class="text-capitalize">{{ selectedHistory.solved_by }}</span> le {{ getDate(selectedHistory.solved_at) }}
            </template>
<!--            <span>{{ getDate(selectedHistory.created) }}</span>-->
          </div>
        </q-card-section>
        <q-card-section v-if="!selectedHistory.solved_at">
          <q-btn outline color="secondary" label="Marquer comme terminé" @click="setTaskDone(selectedHistory)"></q-btn>
        </q-card-section>
        <q-separator/>
        <q-card-actions align="right">
          <q-btn flat color="red" @click.stop="removeHistory(selectedHistory)">Supprimer</q-btn>
          <q-btn flat color="grey" @click.stop="showHistory = false;selectedHistory = null">Fermer</q-btn>
        </q-card-actions>
      </q-card>
    </q-dialog>

<!--    <pre>{{ issues }}</pre>-->
  </q-page>
</template>

<script>
import { date, debounce } from 'quasar'

export default {
  name: 'TasksPage',
  data () {
    return {
      showHistory: false,
      selectedHistory: null
    }
  },
  created () {
  },
  computed: {
    rawIssues () {
      return this.$store.state.core.firebase.history.filter(item => {
        return item.type === 'issue'
      }).reverse() || []
    },
    items () {
      return this.$store.state.core.firebase.stock.filter(item => {
        let refs = Array.from(new Set(this.rawIssues.map(issue => issue.ref)))
        return refs.includes(item.ref)
      }) || []
    },
    issues () {
      return this.rawIssues.map(issue => {
        let item = this.items.find(item => item.ref === issue.ref) || {}
        return {
          ...issue,
          item
        }
      })
    }

  },
  methods: {
    getDate (timestamp) {
      return date.formatDate(timestamp, 'DD/MM/YY - HH:mm')
    },
    setTaskDone (history) {
      this.$store.dispatch('core/updateItem', {
        collection: 'history',
        itemId: history.id,
        data: {
          id: history.id,
          solved_at: new Date().toISOString(),
          solved_by: this.$store.state.core.username
        }
      }).then(_ => {
        this.$q.notify('Terminé !')
        this.$store.dispatch('core/loadAppData').then(_ => {
          this.showHistory = false
          this.selectedHistory = null
        })
      })
    },
    getImageUrl (history, image, thumb = false) {
      return this.$pb.files.getURL(history, image, { thumb: thumb ? '300x300f' : null })
    }
  }
}
</script>

<style>
</style>
