<template>
  <v-btn
    v-if="showFeedback"
    id="feedback-visibility-toggle"
    class="me-3"
    text
    color="info"
    large
    title="Feedback is on"
    :style="{backgroundColor: '#cce7ff'}"
    @click="showFeedback = !showFeedback"
  >
    <v-icon>
      rate_review
    </v-icon>
  </v-btn>
  <v-btn
    v-else
    id="feedback-visibility-toggle"
    class="me-3"
    text
    large
    color="grey"
    title="Feedback is off"
    @click="showFeedback = !showFeedback"
  >
    <v-icon>
      rate_review
    </v-icon>
  </v-btn>
</template>

<script lang="ts">
import Vue from 'vue'
import { SubmissionNotes } from '@/store/modules/submission-notes'
import { createComputedGetterSetter } from '@/util/helpers'
import { getters } from '@/store/getters'
import Component from 'vue-class-component'

@Component
export default class ToggleFeedbackVisibilityButton extends Vue {
  get showFeedback () {
    return getters.state.SubmissionNotes.ui.showFeedback
  }

  set showFeedback (val) {
    SubmissionNotes.SET_SHOW_FEEDBACK(val)
  }
}
</script>


<style scoped>

</style>