<template>
  <div
    :class="specialContainerClass"
    class="project">
    <div class="project__header">
      <h1
        class="project__title"
        data-cy="project-title">{{ project.title }}</h1>
      <p class="project__description">
        {{ project.description }}
      </p>

      <h2 class="project__objectives-title">Ziele</h2>
      <ul class="project__objectives">
        <li
          :key="index"
          class="project__objective"
          v-for="(objective, index) in objectives">{{ objective }}
        </li>
      </ul>

      <div class="project__meta">
        <project-actions
          :id="project.id"
          v-if="!me.readOnly && !me.selectedClass.readOnly"/>
        <owner-widget :owner="project.student"/>
        <entry-count-widget :entry-count="projectEntryCount"/>
      </div>

    </div>
    <div class="project__content">
      <add-project-entry
        :project="project.id"
        class="project__add-entry"
        data-cy="add-project-entry"
        v-if="isOwner && !me.readOnly && !me.selectedClass.readOnly"/>
      <project-entry
        v-bind="entry"
        :key="index"
        :read-only="me.readOnly || me.selectedClass.readOnly"
        v-for="(entry, index) in project.entries"/>
    </div>
  </div>
</template>

<script>
  import ProjectEntry from '@/components/portfolio/ProjectEntry';
  import ProjectActions from '@/components/portfolio/ProjectActions';
  import AddProjectEntry from '@/components/portfolio/AddProjectEntry';
  import EntryCountWidget from '@/components/rooms/EntryCountWidget';
  import OwnerWidget from '@/components/portfolio/OwnerWidget';

  import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
  import PROJECT_QUERY from '@/graphql/gql/queries/projectQuery.gql';

  export default {
    props: ['slug'],

    components: {
      AddProjectEntry,
      ProjectEntry,
      ProjectActions,
      EntryCountWidget,
      OwnerWidget
    },

    data() {
      return {
        project: {
          student: {
            id: ' '
          }
        },
        me: {
          id: ''
        }
      };
    },

    computed: {
      objectives() {
        return this.project.objectives ? this.project.objectives.split('\n') : [];
      },
      specialContainerClass() {
        const cls = this.project.appearance;
        return [cls ? `project--${cls}` : ''];
      },
      isOwner() {
        return this.me.id === this.project.student.id;
      },
      projectEntryCount() {
        return this.project.entries ? this.project.entries.length : 0;
      }
    },

    apollo: {
      project: {
        query: PROJECT_QUERY,
        variables() {
          return {
            slug: this.slug
          };
        },
        update(data) {
          const project = this.$getRidOfEdges(data).project || {};
          this.$store.dispatch('setSpecialContainerClass', project.appearance);
          return project;
        },
        pollInterval: 5000,
      },
      me: {
        query: ME_QUERY
      }
    },

    created() {
    },

    beforeDestroy() {
      this.$store.dispatch('setSpecialContainerClass', '');
    },
  };
</script>

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

  .project {

    @include skillbox-colors;

    &__header {
      padding: $large-spacing;
    }

    &__add-entry {
      height: 120px;
    }

    &__description,
    &__objective {
      font-family: $sans-serif-font-family;
    }

    &__description {
      margin-bottom: 30px;
    }

    &__objectives-title {
      font-size: toRem(22px);
      margin-bottom: 8px;
    }

    &__objectives {
      list-style: disc;
      padding-left: 30px;
    }

    &__objective {
      line-height: 1.5;
    }

    &__meta {
      display: flex;
      flex-direction: column;
      @include desktop {
        flex-direction: row-reverse;
      }
      justify-content: start;
      position: relative;
      align-items: center;

      & > :first-child {
        margin-left: $large-spacing;
      }

      & > :nth-child(2) {
        margin-left: $large-spacing;
      }
    }

    &__content {
      background-color: rgba($color-charcoal-dark, 0.18);
      display: flex;
      flex-direction: column;
      /*max-width: 840px;*/
      width: 100%;
      min-height: 75vh;
      align-content: start;
      margin: 0 auto;
      @supports (display: grid) {
        display: grid;
        width: auto;
      }
      grid-template-columns: minmax(min-content, 840px);
      grid-row-gap: 30px;
      justify-content: center;
      padding: $large-spacing $medium-spacing;
    }
  }
</style>
