<template>
  <v-container flex>
    <v-layout row wrap>
      <v-flex xs6 offset-xs3>
        <v-alert :value="!feedback" type="info">
          This submission hasn't been corrected due to this being a pass only exam.
        </v-alert>
      </v-flex>
      <v-flex lg6 md12 mt-5>
        <base-annotated-submission>
          <v-toolbar
            dense
            slot="header"
            class="mb-1 elevation-1"
          >
            <toggle-feedback-visibility-button/>

            <v-spacer/>

            <h2>Score: {{feedback ? feedback.score : 'N/A'}} / {{submissionType.fullScore}}</h2>
          </v-toolbar>
          <template slot="table-content">
            <tr v-for="(code, lineNo) in submission" :key="lineNo">
              <submission-line :code="code" :lineNo="lineNo">
                <template v-if="feedback">
                  <template v-for="(comment, index) in feedback.feedbackLines[lineNo]">
                    <feedback-comment
                      v-if="feedback.feedbackLines[lineNo] && showFeedback"
                      v-bind="comment"
                      :line-no="lineNo"
                      :key="index"
                      :show_visibility_icon="false"
                    />
                  </template>
                </template>
              </submission-line>
            </tr>
          </template>
        </base-annotated-submission>
        <submission-tests
          :tests="submission.tests"
          :expand="true"
          class="mt-3"
        />
      </v-flex>
      <v-flex lg6 md12 mt-5 pl-3>
        <submission-type
          v-bind="submissionType">
        </submission-type>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import AnnotatedSubmission from '@/components/submission_notes/SubmissionCorrection'
import SubmissionType from '@/components/SubmissionType'
import BaseAnnotatedSubmission from '@/components/submission_notes/base/BaseAnnotatedSubmission'
import SubmissionLine from '@/components/submission_notes/base/SubmissionLine'
import FeedbackComment from '@/components/submission_notes/base/FeedbackComment'
import {StudentPage} from '@/store/modules/student-page'
import {SubmissionNotes} from '@/store/modules/submission-notes'
import ToggleFeedbackVisibilityButton from '@/components/submission_notes/toolbars/ToggleFeedbackVisibilityButton'
import SubmissionTests from '@/components/SubmissionTests'
import NonFinalFeedbackAlert from '@/components/student/NonFinalFeedbackAlert'

export default {
  name: 'student-submission-page',
  components: {
    ToggleFeedbackVisibilityButton,
    NonFinalFeedbackAlert,
    SubmissionTests,
    FeedbackComment,
    SubmissionLine,
    BaseAnnotatedSubmission,
    AnnotatedSubmission,
    SubmissionType},
  computed: {
    id: function () {
      return this.$route.params.id
    },
    submission () { return SubmissionNotes.submission },
    showFeedback: function (state) { return SubmissionNotes.state.ui.showFeedback },
    submissionType () { return StudentPage.state.submissionData[this.id].type},
    feedback () { return StudentPage.state.submissionData[this.$route.params.id].feedback}
  },
  methods: {
    onRouteMountOrUpdate (routeId) {
      StudentPage.SET_VISITED({ index: routeId, visited: true })
      // TODO this seems fishy and there probably is the student page bug in here
      SubmissionNotes.SET_SUBMISSION(this.$store.state.studentPage.submissionData[this.id])
    }
  },
  mounted () {
    this.onRouteMountOrUpdate(this.id)
  },
  beforeRouteUpdate (to, from, next) {
    this.onRouteMountOrUpdate(to.params.id)
    next()
  }
}
</script>