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

<script>
  import StudentSubmissionDocument from '@/components/StudentSubmissionDocument';

  export default {
    props: ['submission'],
    components: {
      StudentSubmissionDocument
    },
    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)}…`;
      }
    },

    computed: {
      name() {
        return this.submission && this.submission.student
          ? `${this.submission.student.firstName} ${this.submission.student.lastName}` : '';
      },
    },
  };
</script>

<style scoped lang="scss">
  @import "~styles/helpers";

  .student-submission {
    @include table-row;

    &__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>
