<template>
  <page-form class="room-form" @save="$emit('save', localRoom)" title="Neues Board">
    <page-form-input v-model="localRoom.title" label="Titel">
    </page-form-input>

    <page-form-input v-model="localRoom.description" label="Beschreibung" type="textarea">
    </page-form-input>

    <label class="room-form__property-heading" for="room-class">Klasse</label>
    <select
      class="skillbox-input room-form__input"
      id="room-class"
      v-model="localRoom.schoolClass"
    >
      <option :value="{}" disabled hidden>Klasse wählen</option>
      <option
        v-for="schoolClass in schoolClasses"
        :key="schoolClass.id"
        v-bind:value="schoolClass"
      >{{schoolClass.name}}
      </option>
    </select>
    <h2 class="room-form__property-heading">Farbe</h2>
    <color-chooser
      :selected-color="localRoom.appearance"
      v-on:input="updateColor"
    ></color-chooser>
    <template slot="footer">
      <button
        type="submit"
        class="button button--primary room-form__save-button"
        :class="{'button--disabled': noClassSelected}"
        :disabled="noClassSelected"
      >Speichern
      </button>
      <router-link to="/rooms" tag="button" class="button">Abbrechen</router-link>
    </template>
  </page-form>
</template>

<script>
  import ColorChooser from '@/components/ColorChooser';
  import PageForm from '@/components/page-form/PageForm';
  import PageFormInput from '@/components/page-form/PageFormInput';

  import ME_QUERY from '@/graphql/gql/meQuery.gql';

  export default {
    props: ['room'],

    components: {
      ColorChooser,
      PageForm,
      PageFormInput
    },

    data() {
      return {
        localRoom: Object.assign({}, this.room),
        me: {}
      }
    },

    computed: {
      schoolClasses() {
        return this.$getRidOfEdges(this.me.schoolClasses);
      },
      noClassSelected() {
        return this.localRoom.schoolClass.id === undefined;
      }
    },

    methods: {
      updateColor(newColor) {
        this.localRoom.appearance = newColor;
        this.$store.dispatch('setSpecialContainerClass', newColor);
      }
    },

    apollo: {
      me: {
        query: ME_QUERY,
      }
    },

    created() {
      this.$store.dispatch('setSpecialContainerClass', this.localRoom.appearance);
    },

    beforeDestroy() {
      this.$store.dispatch('setSpecialContainerClass', '');
    }
  }
</script>

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

  .room-form {
    &__property-heading {
      @include page-form-input-heading;
    }

    &__input,
    &__textarea {
      width: 100%;
      margin-bottom: 35px;
    }

    &__save-button {
      margin-right: 15px;
    }
  }
</style>
