<template>
  <div class="group-list">
    <h1
      class="group-list__header"
      data-cy="group-list-title">{{ title }}</h1>
    <router-link
      :to="showCodeRoute"
      class="group-list__code-link button button--primary"
      data-cy="show-code-button"
      v-if="showCode && !readOnly">Zugangscode anzeigen
    </router-link>

    <div class="group-list__content">
      <h2 class="group-list__heading"><span
        class="group-list__name"
        data-cy="group-list-name">{{ name }}</span>
        <edit-group-name
          v-if="canEdit && !readOnly"
          @edit="$emit('edit')"/>
      </h2>
      <div class="group-list__members group-list-members">
        <ul
          class="group-list-members__list simple-list simple-list--active"
          data-cy="active-class-members-list">
          <li
            :key="member.id"
            class="simple-list__item member-item"
            data-cy="active-member"
            v-for="member in activeMembers">
            <span class="member-item__name">{{ fullName(member) }}</span>
            <span class="member-item__role">{{ role(member) }} </span>
            <a
              class="member-item__action simple-list__action"
              data-cy="leave-group"
              v-if="member.isMe && enableDeactivate"
              @click="$emit('leave', member)">Verlassen</a>
            <a
              class="member-item__action simple-list__action"
              data-cy="remove-from-class"
              v-if="canEdit && enableDeactivate && !member.isMe"
              @click="$emit('remove', member)">Deaktivieren</a>
          </li>
        </ul>
        <template v-if="inactiveMembers.length">
          <h3 class="group-list__inactive-heading">Deaktivierte Personen</h3>
          <ul
            data-cy="inactive-class-members-list"
            class="simple-list simple-list--inactive">
            <li
              :key="member.id"
              class="simple-list__item member-item"
              data-cy="inactive-member"
              v-for="member in inactiveMembers">
              <span class="member-item__name">{{ fullName(member) }}</span>
              <span class="member-item__role">{{ role(member) }}</span>
              <a
                class="member-item__action simple-list__action"
                data-cy="add-to-class"
                v-if="canEdit && enableDeactivate"
                @click="$emit('add', member)">Aktivieren</a>
              <a
                class="member-item__action simple-list__action"
                data-cy="rejoin-class"
                v-if="member.isMe && member.isTeacher"
                @click="$emit('add', member)">Aktivieren</a>
            </li>
          </ul>
        </template>

      </div>

    </div>
  </div>
</template>

<script>
  import EditGroupName from '@/components/profile/EditGroupName';

  export default {
    // props: ['active-members', 'inactive-members', 'name', 'canEdit'],
    props: {
      title: {
        type: String,
        default: '',
      },
      showCode: {
        type: Boolean,
        default: false,
      },
      showCodeRoute: {
        type: Object,
        default: () => ({}),
      },
      readOnly: {
        type: Boolean,
        default: false
      },
      activeMembers: {
        type: Array,
        default: () => [],
      },
      inactiveMembers: {
        type: Array,
        default: () => [],
      },
      name: {
        type: String,
        default: '',
      },
      canEdit: {
        type: Boolean,
        default: false,
      },
      enableDeactivate: {
        type: Boolean,
        default: false
      }
    },

    components: {
      EditGroupName,
    },

    methods: {
      fullName(member) {
        return `${member.firstName} ${member.lastName}`;
      },
      role({isTeacher}) {
        if (isTeacher === undefined) {
          return '';
        }
        return isTeacher ? 'Lehrperson' : 'Schüler';
      },

    },
  };
</script>

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

  .group-list {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    grid-template-areas: "h b" "c c";

    &__header {
      grid-area: h;
    }

    &__code-link {
      grid-area: b;
      justify-self: end;
      align-self: center;
    }

    &__content {
      grid-area: c;
      width: 100%;
      margin-bottom: $large-spacing;
    }

    &__inactive-heading {
      @include heading-4;
      margin-bottom: $small-spacing;
    }

    &__name {
      @include heading-2;
    }
  }

  .member-item {
    &__name {
      font-family: $sans-serif-font-family;
      font-weight: $font-weight-bold;
      flex: 2 1 auto;
    }

    &__role {
      flex: 0 1 110px;
      text-align: right;
    }

    &__action {
      flex: 0 1 110px;
      padding-left: $large-spacing;
    }
  }
</style>
