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

<script>
  import addSchoolClassMixin from '@/mixins/add-school-class';

  import CREATE_CLASS_MUTATION from '@/graphql/gql/mutations/createClass.gql';
  import MY_SCHOOL_CLASS_QUERY from '@/graphql/gql/queries/mySchoolClass';
  import JoinForm from '@/components/profile/JoinForm';

  export default {
    mixins: [addSchoolClassMixin],

    components: {
      JoinForm
    },

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

    methods: {
      updateName(event) {
        this.name = event.target.value;
        this.error = '';
        // todo: display error
        throw new Error('Not Implemented');
      },
      createClass(name) {
        let self = this;
        this.$apollo.mutate({
          mutation: CREATE_CLASS_MUTATION,
          variables: {
            input: {
              name,
            },
          },
          update(store, {data: {createSchoolClass: {schoolClass}}}) {
            self.addSchoolClass(store, schoolClass);
            self.$router.push({
              name: 'my-class',
            });
          },
          refetchQueries: [{
            query: MY_SCHOOL_CLASS_QUERY,
          }],
        });
      },
      cancel() {
        this.$router.go(-1);
      },
    },
  };
</script>

<style scoped lang="scss">
  @import "@/styles/_variables.scss";

  .create-class {
  }
</style>
