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

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

    <h2 class="room-form__property-heading">Farbe</h2>
    <color-chooser
      :selected-color="localRoom.appearance"
      @input="updateColor"
    />
    <template slot="footer">
      <button
        type="submit"
        data-cy="room-form-save"
        class="button button--primary room-form__save-button"
      >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/queries/meQuery.gql';

  export default {
    props: ['room'],

    components: {
      ColorChooser,
      PageForm,
      PageFormInput
    },

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

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

    beforeDestroy() {
      this.$store.dispatch('setSpecialContainerClass', '');
    },

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

    apollo: {
      me: {
        query: ME_QUERY,
      }
    },
  };
</script>

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

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

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

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