<template>
  <v-container class="my-5">
    <v-card flat color="rgba(0,0,0,0)">
      <v-card-title class="text-h5">Open Tasks
        <dialog-info>
          <template v-slot:title>Open Tasks</template>
          <template v-slot:text>
            In the "Open Tasks" area you get an overview of pending tasks.
          </template>
        </dialog-info>
      </v-card-title>
      <v-card-text v-if="!owners">
        <v-skeleton-loader type="chip"></v-skeleton-loader>
      </v-card-text>
      <v-card-text v-else>
        <v-chip v-for="owner in owners" :key="owner.id" :class="hashColor(owner.id)"
                class="mr-2" small dark
                @click="filter = owner.name; filterOwners = true"
        >
          <v-icon small left>mdi-account-circle</v-icon>
          {{ owner.name }}
        </v-chip>
        <v-chip v-for="reviewer in reviewers" :key="reviewer.id" :class="hashColor(reviewer.id)"
                class="mr-2" small dark
                @click="filter = reviewer.name; filterOwners = false"
        >
          <v-icon small left>mdi-account-circle-outline</v-icon>
          {{ reviewer.name }}
        </v-chip>
        <v-btn v-show="filter !== ''" icon small color="gray" @click="filter = ''">
          <v-icon small>mdi-close</v-icon>
        </v-btn>
      </v-card-text>
    </v-card>
    <v-container class="pt-0">
      <v-card flat v-if="!tasks">
        <v-card-text>
          <v-skeleton-loader class="white" type="sentences"></v-skeleton-loader>
        </v-card-text>
      </v-card>
      <v-card v-else flat class="my-1" v-for="task in filteredTasks" :key="task.id"
              :to="{name: 'site-kanban-id', params: {'cycleId': task.label.cycle_id}}">
        <v-row no-gutters class="px-2 py-4 cycle body-2" :class="hashColor(task.lens).slice(0,-1)">
          <v-col cols="6">
            {{ task.lens_emoji }}{{ task.purpose_emoji }}&nbsp;{{ task.name }}
          </v-col>
          <v-col cols="auto" class="ml-auto" align-self="center">
            <v-chip v-if="task.status !== 'Review'" small dark :class="hashColor(task.lens)" class="mr-2">
              <v-icon small left>mdi-account-circle</v-icon>
              {{ task.owner }}
            </v-chip>
            <v-chip v-else small dark class="mr-2" :class="hashColor(task.lens)">
              <v-icon small left>mdi-account-circle-outline</v-icon>
              {{ task.reviewer }}
            </v-chip>
            <v-chip small dark :class="hashColor(task.lens)">
              <v-icon small left>mdi-timelapse</v-icon>
              {{ task.effort }}
            </v-chip>
          </v-col>
        </v-row>
      </v-card>
    </v-container>
  </v-container>
</template>

<script>
import DialogInfo from "@/components/DialogInfo";
export default {
  name: "UpcomingTasks",
  components: {DialogInfo},
  data: () => ({
    tasks: [],
    owners: [],
    reviewers: [],
    filter: '',
    filterOwners: true,
  }),
  methods: {
    hashColor(lens) {
      switch (lens) {
        case 'Viability':
          return 'error'
        case 'Feasibility':
          return 'info'
        case 'Desirability':
          return 'primary'
        default:
          return 'secondary'
      }
    }
  },
  computed: {
    filteredTasks() {
      if (this.filter === '') {
        return this.tasks
      } else if (this.filterOwners) {
        return this.tasks.filter(task => task.owner === this.filter)
      } else {
        return this.tasks.filter(task => task.reviewer === this.filter)
      }
    },
  },
  created() {
    this.$http.get('/board/task').then(res => {
      this.tasks = res.data.tasks
      this.owners = res.data.owners
      this.reviewers = res.data.reviewers
    })
  },
}
</script>

<style scoped>
.cycle.primar {
  border-left: 8px solid #F29829;
}

.cycle.erro {
  border-left: 8px solid #F25C05
}

.cycle.inf {
  border-left: 8px solid #156389;
}

.cycle.secondar {
  border-left: 8px solid #68A694;
}
</style>