<template>
    <v-container class="dashboard">
      <app-bar title="Dashboard"></app-bar>

      <v-navigation-drawer v-model="rightDrawerState" class="elevation-0" touchless
                           app right width="400" overlay-opacity="0.2" overlay-color="white">
        <v-row class="mt-3" v-if="$vuetify.breakpoint.mdAndDown">
          <v-btn depressed tile @click="rightDrawerState = !rightDrawerState" color="#E2E2E2" class="ml-3" :ripple="false">
            <v-icon color="accent">mdi-chevron-right</v-icon>
          </v-btn>
        </v-row>
        <matrix v-if="$store.getters['site/getSettings'].includes('matrix') || $store.getters['site/getSettings'].includes('fidelity')"></matrix>
        <upcoming-tasks></upcoming-tasks>
      </v-navigation-drawer>

      <settings-team></settings-team>

      <prototyping-process v-if="$store.getters['site/getSettings'].includes('process')"></prototyping-process>

      <cycle-table :cycles="getCycles"
                   :teams="Array(getTeam.name)"
                   v-on:update-add-cycle-allowed="updateAddCycleAllowed"
                   v-on:update-add-cycle-disabled="updateAddCycleDisabled"
      ></cycle-table>

    </v-container>
</template>

<script>
import {mapGetters} from 'vuex'
import CycleTable from "@/components/CycleTable";
import Matrix from "@/components/Matrix";
import UpcomingTasks from "@/components/UpcomingTasks";
import PrototypingProcess from "@/components/PrototypingProcess";
import AppBar from "@/components/AppBar";
import SettingsTeam from "@/components/SettingsTeam";

export default {
  name: "Dashboard",
  components: {
    SettingsTeam,
    PrototypingProcess,
    AppBar,
    CycleTable,
    Matrix,
    UpcomingTasks,
  },
  props: ['addedCycleId', 'reflectedCycleId', 'kanbanCycleId'],
  data: () => ({
    addCycleAllowed: true,
    showAddCycleDisabledBanner: false
  }),
  methods: {
    updateAddCycleAllowed(allowed) {
      this.addCycleAllowed = allowed
    },
    updateAddCycleDisabled(disabled) {
      this.showAddCycleDisabledBanner = disabled
    },

  },
  computed: {
    ...mapGetters('site', ['getTeam', 'getRightDrawer', 'getCycles']), // this.$store.getters['site/getTeam']
    rightDrawerState: {
      get() {
        return this.getRightDrawer
      },
      set(val) {
        this.$store.dispatch('site/toggleRightDrawer', val)
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  //background-color: rgba(255, 255, 255, 1.0) !important;
}
</style>