<template>
  <div class="my-class">
    <group-list
      :name="me.selectedClass.name"
      :active-members="me.selectedClass.members.filter(member => member.active)"
      :inactive-members="me.selectedClass.members.filter(member => !member.active)"
      :show-code="me.isTeacher"
      :show-code-route="showCodeRoute"
      :can-edit="me.isTeacher"
      title="Klassenliste"
      class="my-class__class"
      @add="add"
      @edit="editClassName"
    />
  </div>
</template>

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

  import MY_SCHOOL_CLASS_QUERY from '@/graphql/gql/queries/mySchoolClass.gql';
  import ADD_REMOVE_MEMBER_MUTATION from '@/graphql/gql/mutations/addRemoveMember.gql';
  import selectedClassMixin from '@/mixins/selected-class';
  import {SHOW_SCHOOL_CLASS_CODE} from '@/router/me.names';

  export default {
    mixins: [selectedClassMixin],

    components: {
      GroupList,
    },

    data() {
      return {
        showCodeRoute: {
          name: SHOW_SCHOOL_CLASS_CODE,
        },
      };
    },

    methods: {
      changeMember(member, active) {
        this.$apollo.mutate({
          mutation: ADD_REMOVE_MEMBER_MUTATION,
          variables: {
            input: {
              member: member.id,
              schoolClass: this.me.selectedClass.id,
              active,
            },
          },
          update(store, {data: {addRemoveMember: {success}}}) {
            if (success) {
              const query = MY_SCHOOL_CLASS_QUERY;
              const data = store.readQuery({query});
              let memberIndex = data.me.selectedClass.members.findIndex(m => m.id === member.id);
              data.me.selectedClass.members = [
                ...data.me.selectedClass.members.slice(0, memberIndex),
                {...member, active},
                ...data.me.selectedClass.members.slice(memberIndex + 1),
              ];
              store.writeQuery({query, data});
            }
          },
        });
      },
      add(member) {
        this.changeMember(member, true);
      },
      remove(member) {
        this.$modal.open('deactivate-person', {
              myself: member.id === this.me.id,
              name: `${member.firstName} ${member.lastName}`,
              className: this.me.selectedClass.name,
            })
            .then(() => {
              this.changeMember(member, false);
            })
            .catch(() => {
            });
      },
      editClassName() {
        this.$store.dispatch('editClassName');
      }
    },
  };
</script>

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

  .my-class {
    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;
    }

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

</style>
