<template>
  <v-card name='subscription-list'>
    <v-toolbar color="teal" :dense="sidebar">
      <v-toolbar-side-icon><v-icon>assignment</v-icon></v-toolbar-side-icon>
      <v-toolbar-title v-if="showDetail" style="min-width: fit-content;">
        Tasks
      </v-toolbar-title>
      <v-spacer/>
      <v-btn icon @click="getSubscriptions(false)">
        <v-icon v-if="!updating">refresh</v-icon>
        <v-progress-circular
          v-else
          indeterminate
          color="black"
          size="20"
        />
      </v-btn>
    </v-toolbar>
    <v-tabs grow color="teal lighten-1" v-model="selectedStage" v-if="showDetail">
      <v-tab v-for="(item, i) in stagesReadable" :key="i">
        {{item}}
      </v-tab>
      <v-tab-item v-for="(stage, i) in stages" :key="i">
        <subscriptions-for-stage :stage="stage" :id="`stage-${i}`"/>
      </v-tab-item>
    </v-tabs>
  </v-card>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import { Prop } from 'vue-property-decorator'
import { mapGetters, mapActions, mapState } from 'vuex'
import { UI } from '@/store/modules/ui'
import { actions } from '@/store/actions'
import SubscriptionCreation from '@/components/subscriptions/SubscriptionCreation.vue'
import SubscriptionForList from '@/components/subscriptions/SubscriptionForList.vue'
import SubscriptionsForStage from '@/components/subscriptions/SubscriptionsForStage.vue'
import { Subscriptions } from '@/store/modules/subscriptions'

@Component({
  name: 'subscription-list',
  components: {
    SubscriptionsForStage,
    SubscriptionForList,
    SubscriptionCreation 
  },
})
export default class SubscriptionList extends Vue {
  @Prop({type: Boolean, required: true, default: false}) sidebar!: boolean

  selectedStage = null
  updating = false
  timer = 0

  get subscriptions () { return Subscriptions.state.subscriptions }
  get stages () { return Subscriptions.availableStages }
  get stagesReadable () { return Subscriptions.availableStagesReadable }
  get showDetail () { 
    return !this.sidebar || (this.sidebar && !UI.state.sideBarCollapsed) 
  }

  async getSubscriptions (silent: boolean) {
    if (silent === false) {
      this.updating = true
    }
    const subscriptions = await Subscriptions.getSubscriptions()
    this.updating = false
    return subscriptions
  }

  mounted() {
    this.timer = setInterval(() => {
      this.getSubscriptions(true)
    }, 30 * 1e3)
  }

  beforeDestroy() {
    clearInterval(this.timer)
  }

  created() {
    const submissionTypes = actions.updateSubmissionTypes()
    const subscriptions = Subscriptions.getSubscriptions()
    Promise.all([submissionTypes, subscriptions]).then(() => {
      Subscriptions.subscribeToAll()
      Subscriptions.cleanAssignmentsFromSubscriptions(undefined)
    })
  }
}
</script>

<style scoped>

</style>