<template>
  <div class="student-submission student-submission-row">
    <div class="student-submission__student-name">
      {{name}}
    </div>
    <div class="student-submission__entry entry">
      <p>{{submission.text | trimToLength(50)}}</p>
      <p v-if="submission.document && submission.document.length > 0" class="entry__document">
          <student-submission-document :document="submission.document" class="entry-document"></student-submission-document>
      </p>
    </div>
    <div class="student-submission__feedback entry" v-if="submission.submissionFeedback">
      <p class="entry__text" :class="{'entry__text--final': submission.submissionFeedback.final}">{{submission.submissionFeedback.text | trimToLength(50)}}</p>
    </div>
  </div>
</template>

<script>

  import DocumentIcon from '@/components/icons/DocumentIcon'
  import StudentSubmissionDocument from '@/components/StudentSubmissionDocument';

  export default {
    props: ['submission'],
    components: { DocumentIcon, StudentSubmissionDocument },

    computed: {
      name() {
        return this.submission && this.submission.student
          ? `${this.submission.student.firstName} ${this.submission.student.lastName}` : '';
      },
    },
    filters: {
      trimToLength: function(text, numberOfChars) {
        if (!text) {
          return '';
        }
        if (text.length <= numberOfChars) {
          return text;
        }
        const index = text.indexOf(' ', numberOfChars - 1);
        if (index === -1) {
          return text;
        }
        return `${text.substring(0, index)}…`;
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "@/styles/_variables.scss";
  @import "@/styles/_functions.scss";

  .student-submission {

    &__student-name {
      font-size: toRem(17px);
      font-weight: 800;
      font-family: $sans-serif-font-family;
    }

    &__entry {
      font-size: toRem(14px);
      font-family: $sans-serif-font-family;
    }

    .entry-document {
      margin-top: 1rem;
    }
  }

  .entry {
    &__text {
      color: $color-silver-dark;
      &--final {
        color: $color-charcoal-dark;
      }
    }
  }
</style>
