<template>
  <div class="my-team">
    <template v-if="me.team">
      <group-list
        :active-members="me.team.members"
        :can-edit="true"
        :show-code-route="showCodeRoute"
        :show-code="true"
        :name="me.team.name"
        title="Mein Team"
        @edit="editTeamName"
        @leave="leaveTeam"
      />
    </template>
    <template v-else>
      <h1 class="my-team__heading">Mein Team</h1>
      <div class="my-team__section">
        <h2 class="my-team__subheading">Willst du einem bestehenden Team beitreten?</h2>
        <router-link
          :to="joinTeamRoute"
          class="button button--primary">Zugangscode eingeben
        </router-link>
      </div>
      <div class="my-team__section">
        <h2 class="my-team__subheading">Willst du ein neues Team erfassen?</h2>
        <router-link
          :to="createTeamRoute"
          class="button button--primary">Team erfassen
        </router-link>
      </div>
    </template>

  </div>
</template>

<script>
  import {CREATE_TEAM, JOIN_TEAM, SHOW_TEAM_CODE} from '@/router/me.names';
  import me from '@/mixins/me';
  import GroupList from '@/components/profile/GroupList';
  import LEAVE_TEAM_MUTATION from 'gql/mutations/me/leaveTeam.gql';
  import addTeam from '@/helpers/add-team';

  export default {
    mixins: [me],
    components: {GroupList},

    data() {
      return {
        joinTeamRoute: {
          name: JOIN_TEAM,
        },
        createTeamRoute: {
          name: CREATE_TEAM,
        },
        showCodeRoute: {
          name: SHOW_TEAM_CODE,
        },
      };
    },

    methods: {
      editTeamName() {
        this.$store.dispatch('editTeamName');
      },
      leaveTeam() {
        this.$apollo.mutate({
          mutation: LEAVE_TEAM_MUTATION,
          update(store, {data: {leaveTeam: {success}}}) {
            addTeam(store, null);
          },
        });
      },
    },
  };
</script>

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

  .my-team {
    &__heading {
      margin-bottom: $section-spacing;
    }

    &__section {
      margin-bottom: $section-spacing;
    }

    &__subheading {
      @include heading-3;
      margin-bottom: $large-spacing;
    }
  }
</style>
