<template>
  <join-form
    :value="name"
    class="create-team"
    title="Team erfassen"
    ok-text="Team erfassen"
    label-text="Name"
    cancel-text="Abbrechen"
    @input="updateName"
    @cancel="cancel"
    @confirm="createTeam"
  />
</template>

<script>
  import addTeamMixin from '@/mixins/add-team';

  import JoinForm from '@/components/profile/JoinForm';

  import CREATE_TEAM_MUTATION from '@/graphql/gql/mutations/createTeam.gql';
  import {MY_TEAM} from '@/router/me.names';

  export default {
    mixins: [addTeamMixin],

    components: {
      JoinForm
    },

    data: () => ({
      name: '',
      error: '',
    }),

    methods: {
      updateName(event) {
        this.name = event.target.value;
        this.error = '';
      },
      createTeam(name) {
        this.$apollo.mutate({
          mutation: CREATE_TEAM_MUTATION,
          variables: {
            input: {
              name,
            },
          },
          update: (store, {data: {createTeam: {team}}}) => {
            this.addTeam(store, team);
            this.$router.push({
              name: MY_TEAM,
            });
          },
        });
      },
      cancel() {
        this.$router.go(-1);
      },
    },
  };
</script>
