<template>
  <v-lazy
    v-model="cycle.isActive" :options="{threshold: .5}"
    min-height="40" transition="fade-transition"
  >
    <v-card flat class="cycle mb-2" dark :to="{name: 'site-kanban-id', params: {'cycleId': cycle.id}}">

      <v-row no-gutters class="py-2 px-1 cycle body-2" :class="[cycle.expired && $store.getters['site/getSettings'].includes('expiration') ? 'red--text' : 'black--text', status]">

        <v-col cols="3" sm="1" class="px-2">
          {{ cycle.id }}
        </v-col>

        <v-col cols="9" sm="2" class="px-2">
          {{ cycle.date_start_pretty }}{{ cycle.expired && $store.getters['site/getSettings'].includes('expiration') ? ' - expired' : '' }}
        </v-col>

        <v-col cols="12" sm="2" class="px-2">
          {{ cycle.milestone }}
        </v-col>

        <v-col class="px-2">
          {{ cycle.objective }}
        </v-col>

        <v-col :cols="status === 'reflect' || status === 'todo' ? 12:1" sm="auto" align-self="center" class="text-right">
          <v-btn x-small depressed dark class="mr-5 px-5 body-2" color="#CC0606" min-width="130"
                 @click.native.stop.prevent="dialogDelete = true"
                 v-if="this.$auth.check('admin')"
          >Delete</v-btn>
          <v-dialog
            v-if="this.$auth.check('admin')"
            v-model="dialogDelete"
            max-width="500px"
            overlay-color="white"
          >
            <dialog-alert v-on:on-cancel="dialogDelete = false"
                          v-on:on-continue="deleteCycle"
                          :loading="loading">
              <template v-slot:title>Delete Cycle</template>
              <template v-slot:text>
                Are you sure? This can't be undone!
              </template>
            </dialog-alert>
          </v-dialog>

          <reflect-cycle v-if="status === 'reflect'" :cycle="cycle"></reflect-cycle>
          <cycle-details :cycle="cycle"></cycle-details>
        </v-col>

      </v-row>

    </v-card>
  </v-lazy>
</template>

<script>
import CycleDetails from "@/components/CycleDetails";
import ReflectCycle from "@/components/ReflectCycle";
import DialogAlert from "@/components/DialogAlert";

export default {
  name: "Cycle",
  components: {
    ReflectCycle,
    CycleDetails,
    DialogAlert,
  },
  props: ['cycle'],
  data: () => ({
    dialogDelete: false,
    loading: false
  }),
  methods: {
    deleteCycle() {
      this.loading = true
      this.$http.delete(`/cycles?cycle-id=${this.cycle.id}`).then(() => {
        this.$store.dispatch('site/deleteCycle', this.cycle.id).then(() => {
          this.$snackbar.showMessage({
            content: 'Cycle deleted!'
          })
          this.$store.dispatch('site/fetchMatrix')
          this.$store.dispatch('site/fetchProgress')
        })
      }).finally(() => this.loading = false)
    },
  },
  computed: {
    status() {
      if (this.cycle.status === 'Done') {
        return 'complete'
      } else if (this.cycle.status === 'Ongoing') {
        return 'todo'
      } else if (this.cycle.status === 'Reflect') {
        return 'reflect'
      } else {
        return ''
      }
    }
  }
}
</script>

<style scoped>
.v-card.cycle{
  background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0.6));
  border-top: 1px solid white;
  border-right: 1px solid white;
  border-bottom: 1px solid white;
}

.cycle.complete {
  border-left: 8px solid #F29829;
}

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

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

</style>