<template>
  <v-card>
    <v-toolbar color="teal" :dense="sidebar">
      <v-toolbar-side-icon>
        <v-icon>label</v-icon>
      </v-toolbar-side-icon>
      <v-toolbar-title v-if="showDetail" style="min-width: fit-content;">
        Labels
      </v-toolbar-title>
      <v-spacer />
      <v-btn icon @click="refreshLabels">
        <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-if="showDetail">
      <v-tab>Create</v-tab>
      <v-tab id="update-label-section">Update</v-tab>
      <v-tab-item>
        <feedback-label-form/>
      </v-tab-item>
      <v-tab-item>
        <feedback-label-updater/>
      </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 { getLabels } from '@/api'
import { FeedbackLabels } from '@/store/modules/feedback-labels'
import { UI } from '@/store/modules/ui'
import FeedbackLabelForm from "./FeedbackLabelForm.vue"
import FeedbackLabelUpdater from "./FeedbackLabelUpdater.vue"

@Component({
  components: {
    FeedbackLabelForm,
    FeedbackLabelUpdater,
  }
})
export default class FeedbackLabelsList extends Vue {
  @Prop({type: Boolean, default: false}) sidebar!: boolean

  updating = false

  get showDetail () {
    return !this.sidebar || (this.sidebar && !UI.state.sideBarCollapsed)
  }

  created() {
    this.refreshLabels()
  }

  refreshLabels() {
    this.updating = true
    FeedbackLabels.getLabels().finally(() => {
      this.updating = false
    })
  }
}
</script>

<style>

</style>