<template>
  <div class="assignment-with-submissions">
    <p class="assignment-with-submissions__text">{{ assignment.assignment }}</p>

    <div>
      <a
        class="button button--primary submissions-page__back"
        @click="$emit('back')">Aufgabe im Modul anzeigen</a>
    </div>

    <div
      class="assignment-with-submissions__solution"
      v-if="assignment.solution">
      <h4 class="assignment-with-submissions__heading">Lösung</h4>
      <p
        class="assignment-with-submissions__solution-text"
        data-cy="assignment-solution"
        v-html="assignment.solution" />
    </div>
    <p
      class="assignment-with-submissions__no-submissions"
      v-if="!assignment.submissions.length">Zu diesem Auftrag sind noch keine Ergebnisse vorhanden.</p>

    <div
      class="assignment-with-submissions__submissions submissions"
      v-if="assignment.submissions.length">
      <div class="submissions__header student-submission-row submission-header">
        <p class="submission-header__title">Lernende</p>
        <p class="submission-header__title">Ergebnisse</p>
        <p class="submission-header__title">Feedback</p>
      </div>
      <router-link
        :to="submissionLink(submission)"
        :key="submission.id"
        class="assignment-with-submissions__link"
        v-for="submission in submissions">
        <student-submission
          :submission="submission"
          class="assignment-with-submissions__submission"
        />
      </router-link>
    </div>

  </div>
</template>

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

  import {meQuery} from '@/graphql/queries';

  export default {
    props: ['assignment'],

    components: {
      StudentSubmission
    },

    data() {
      return {
        me: {}
      };
    },

    computed: {
      submissions() {
        return this.assignment.submissions.filter(submission => {
          return this.belongsToSchool(submission);
        });
      },
      currentFilter() {
        return this.me.selectedClass;
      },
    },

    methods: {
      submissionLink(submission) {
        return `/submission/${submission.id}`;
      },
      belongsToSchool(submission) {
        if (this.currentFilter.id === '') {
          return true;
        }
        return submission.student.schoolClasses.edges.some(edge => edge.node.id === this.currentFilter.id);
      }
    },

    apollo: {
      me: meQuery
    }

  };
</script>

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

  .assignment-with-submissions {
    &__title {
      font-size: toRem(35px);
    }

    &__text {
      font-size: toRem(26px);
      margin-bottom: 1rem;
    }

    &__solution {
      margin-bottom: 1rem;
    }

    &__heading {
      font-size: toRem(17px);
      font-weight: 800;
      margin-bottom: 1rem;
    }

    &__link {
      display: block;
    }

    &__submissions {
      margin-top: 3rem;
    }

    &__no-submissions {
      margin-top: $large-spacing;
    }

  }

  .submissions {
    width: 100%;
  }

  .submission-header {
    &__title {
      color: $color-silver-dark;
      font-family: $sans-serif-font-family;
    }
  }

</style>
