<template>
  <div class="student-submission student-submission-row">
    <div class="student-submission__student-name">
      {{ name }}
    </div>
    <div class="student-submission__entry entry">
      <p>{{ text }}</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"
      >
        {{ feedback }}
      </p>
    </div>
  </div>
</template>

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

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

  computed: {
    text() {
      return this.trimToLength(this.submission.text, 50);
    },
    feedback() {
      return this.trimToLength(this.submission.submissionFeedback.text, 50);
    },
    name() {
      return this.submission && this.submission.student
        ? `${this.submission.student.firstName} ${this.submission.student.lastName}`
        : '';
    },
  },
  methods: {
    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/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>
