<template>
  <v-toolbar
    dense>
    <v-toolbar-side-icon @click.stop="helpDialog=true">
        <v-icon>help_outline</v-icon>
    </v-toolbar-side-icon>
    <v-dialog
      scrollable
      max-width="fit-content"
      v-model="helpDialog"
    >
      <correction-help-card/>
    </v-dialog>
    <span class="title">Participant submission</span>
    <toggle-feedback-visibility-button/>
    <v-spacer/>
    <v-tooltip top>
      <v-btn
        icon slot="activator"
        @click="copyToClipboard"
      ><v-icon>content_copy</v-icon></v-btn>
      <span>{{copyMessage}}</span>
    </v-tooltip>
  </v-toolbar>
</template>

<script>
import CorrectionHelpCard from '@/components/submission_notes/CorrectionHelpCard'
import { mapState } from 'vuex'
import ToggleFeedbackVisibilityButton from '@/components/submission_notes/toolbars/ToggleFeedbackVisibilityButton'

export default {
  components: {
    ToggleFeedbackVisibilityButton,
    CorrectionHelpCard },
  name: 'annotated-submission-top-toolbar',
  data () {
    return {
      helpDialog: false,
      copyMessage: 'Copy to clipboard'
    }
  },
  computed: {
    ...mapState({
      submission: state => state.submissionNotes.submission.text,
      showFeedback: state => state.submissionNotes.ui.showFeedback
    })
  },
  methods: {
    copyToClipboard () {
      this.$clipboard(this.submission)
      this.copyMessage = 'Copied!'
      setTimeout(() => {
        this.copyMessage = 'Copy to clipboard'
      }, 2500)
    }
  }
}
</script>

<style scoped>

</style>