<template>
  <!-- eslint-disable vue/no-v-html -->
  <div
    class="module"
    v-if="module.id"
  >
    <div class="module__header">
      <div>
        <h2
          class="module__meta-title"
          id="meta-title"
        >
          {{ module.metaTitle }}
        </h2>
      </div>

      <div>
        <pill :text="module.level?.name"></pill>
        <pill :text="module.category?.name"></pill>
      </div>

    </div>

    <h1
      class="module__title"
      data-cy="module-title"
    >
      {{ module.title }}
    </h1>
    <div class="module__hero">
      <img
        :src="module.heroImage"
        alt=""
        class="module__hero-image"
      />
      <h5
        class="module__hero-source"
        v-if="module.heroSource"
      >
        Quelle: {{ module.heroSource }}
      </h5>
    </div>

    <div class="module__intro-wrapper">
      <bookmark-actions
        :bookmarked="!!module.bookmark"
        :note="note"
        :edit-mode="module.inEditMode"
        class="module__bookmark-actions"
        data-cy="module-bookmark-actions"
        @add-note="$emit('addNote')"
        @edit-note="$emit('editNote')"
        @bookmark="$emit('bookmark', !module.bookmark)"
      />
      <div
        class="module__intro intro"
        v-html="module.intro"
      />
    </div>

    <h3
      v-if="$flavor.showObjectivesTitle && module.objectiveGroups.length"
      id="objectives"
    >
      <span>Lernziele</span>
    </h3>

    <div
      class="module__objective-groups"
      v-if="module.objectiveGroups.length"
    >
      <objective-groups
        :groups="languageCommunicationObjectiveGroups"
        v-if="languageCommunicationObjectiveGroups.length"
      />

      <objective-groups
        :groups="societyObjectiveGroups"
        v-if="societyObjectiveGroups.length"
      />

      <objective-groups
        :groups="interdisciplinaryObjectiveGroups"
        v-if="interdisciplinaryObjectiveGroups.length"
      />
    </div>

    <chapter
      :chapter="chapter"
      :index="index"
      :edit-mode="module.inEditMode"
      v-for="(chapter, index) in module.chapters"
      :key="chapter.id"
    />
  </div>
</template>

<script>
  import ObjectiveGroups from '@/components/objective-groups/ObjectiveGroups.vue';
  import Chapter from '@/components/Chapter.vue';
  import BookmarkActions from '@/components/notes/BookmarkActions.vue';
  import Pill from "@/components/ui/Pill.vue";

  export default {
    props: {
      module: {
        type: Object,
        default: () => ({}),
      },
    },

    components: {
      Pill,
      BookmarkActions,
      ObjectiveGroups,
      Chapter,
    },

    computed: {
      languageCommunicationObjectiveGroups() {
        return this.module.objectiveGroups
          ? this.module.objectiveGroups.filter((group) => group.title.toLowerCase() === 'language_communication')
          : [];
      },
      societyObjectiveGroups() {
        return this.module.objectiveGroups
          ? this.module.objectiveGroups.filter((group) => group.title.toLowerCase() === 'society')
          : [];
      },
      interdisciplinaryObjectiveGroups() {
        return this.module.objectiveGroups
          ? this.module.objectiveGroups.filter((group) => group.title.toLowerCase() === 'interdisciplinary')
          : [];
      },
      note() {
        if (!(this.module && this.module.bookmark)) {
          return;
        }
        return this.module.bookmark.note;
      },
    },
  };
</script>

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

  .module {
    display: flex;
    justify-self: center;
    max-width: 100vw;

    padding: $large-spacing 0;
    @include desktop {
      width: 800px;
      padding: $large-spacing 15px;
    }
    flex-direction: column;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    &__hero {
      margin-bottom: 35px;
    }

    &__hero-image {
      max-width: 100%;
      border-radius: 12px;
    }

    &__hero-source {
      @include tiny-text;
      line-height: 25px;
    }

    &__header {
      display: flex;
      justify-content: flex-start;
      align-items: stretch;
      margin-bottom: 10px;
    }

    &__meta-title {
      @include meta-title;
      margin-right: 20px;

    }

    &__intro-wrapper {
      position: relative;
    }

    &__intro {
      > :deep(p) {
        margin-bottom: $large-spacing;
        @include lead-paragraph;

        &:last-child {
          margin-bottom: 0;
        }
      }

      > :deep(ul) {
        @include list-parent;

        > li {
          @include list-child;
          @include lead-paragraph;
        }
      }
    }

    &__bookmark-actions {
      margin-top: 3px;
    }

    &__objective-groups {
      margin-bottom: 2 * $large-spacing;
    }
  }
</style>
