<template>
  <edit-name-wizard
    :name="name"
    type="Team"
    @input="name = $event"
    @cancel="hideModal"
    @save="save"
  />
</template>

<script>
  import me from '@/mixins/me';
  import EditNameWizard from '@/components/profile/EditNameWizard';
  import UPDATE_TEAM_MUTATION from '@/graphql/gql/mutations/updateTeam.gql';
  import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';

  export default {
    mixins: [me],

    components: {
      EditNameWizard,
    },

    data() {
      return {
        name: ''
      };
    },

    computed: {
      team() {
        return this.me.team;
      }
    },

    mounted() {
      this.name = this.team ? this.team.name : '';
    },

    methods: {
      save() {
        this.$apollo.mutate({
          mutation: UPDATE_TEAM_MUTATION,
          variables: {
            input: {
              name: this.name,
              id: this.team.id
            }
          },
          update(store, {data: {updateTeam: {team: {name}}}}) {
            const query = ME_QUERY;
            const data = store.readQuery({query});
            data.me.team.name = name;
            store.writeQuery({query, data});
          }
        });
        this.hideModal();
      },
      hideModal() {
        this.$store.dispatch('hideModal');
      }
    },
  };
</script>

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

</style>
