<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">Submission of {{ofStudent}}</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'
import { SubmissionNotes } from '@/store/modules/submission-notes';

export default {
  components: {
    ToggleFeedbackVisibilityButton,
    CorrectionHelpCard },
  name: 'annotated-submission-top-toolbar',
  props: {
    ofStudent: {
      type: String,
      default: "Participant"
    }
  },
  data () {
    return {
      helpDialog: false,
      copyMessage: 'Copy to clipboard'
    }
  },
  methods: {
    copyToClipboard () {
      this.$clipboard(SubmissionNotes.state.submission.text)
      this.copyMessage = 'Copied!'
      setTimeout(() => {
        this.copyMessage = 'Copy to clipboard'
      }, 2500)
    }
  }
}
</script>

<style scoped>

</style>