<template>
  <join-form
    :value="code"
    :error="error"
    title="Einem Team beitreten"
    ok-text="Team beitreten"
    cancel-text="Abbrechen"
    @input="updateCode"
    @cancel="cancel"
    @confirm="joinTeam"/>
</template>

<script>
  import JOIN_TEAM_MUTATION from '@/graphql/gql/mutations/joinTeam.gql';

  import JoinForm from '@/components/profile/JoinForm';
  import {MY_TEAM} from '@/router/me.names';
  import addTeam from '@/helpers/add-team';

  export default {
    components: {
      JoinForm,
    },

    data() {
      return {
        code: '',
        error: '',
        teamRoute: {
          name: MY_TEAM,
        },
      };
    },

    methods: {
      updateCode(event) {
        this.code = event.target.value;
        this.error = '';
      },
      cancel() {
        this.$router.push(this.teamRoute);
      },
      joinTeam(code) {
        this.$apollo.mutate({
          mutation: JOIN_TEAM_MUTATION,
          variables: {
            'input': {
              'code': code,
            },
          },
          update: (store, {data: {joinTeam: {team}}}) => {
            addTeam(store, team);
            this.$router.push({name: MY_TEAM});
          },
        });
      },
    },
  };
</script>

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

</style>
