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

    <page-form-input
      label="Beschreibung"
      type="textarea"
      :value="localRoom.description"
      @input="localRoom.description = $event"
    />

    <h2 class="room-form__property-heading">Farbe</h2>
    <color-chooser
      :selected-color="localRoom.appearance"
      @input="updateColor"
    />
    <template #footer>
      <button
        type="submit"
        data-cy="room-form-save"
        class="button button--primary room-form__save-button"
      >
        Speichern
      </button>
      <router-link
        to="/rooms"
        class="button"
      >
        Abbrechen
      </router-link>
    </template>
  </page-form>
</template>

<script setup lang="ts">
import ColorChooser from '@/components/ColorChooser.vue'
import PageForm from '@/components/page-form/PageForm.vue'
import PageFormInput from '@/components/page-form/PageFormInput.vue'
import {onBeforeUnmount, ref} from 'vue'
import {useStore} from 'vuex'

const props = defineProps<{
  room: any
}>()

const emit = defineEmits(['save'])

const localRoom = ref(Object.assign({}, props.room))

const updateColor = (newColor: string) => {
  localRoom.value.appearance = newColor
  store.dispatch('setSpecialContainerClass', newColor)
}

const updateTitle = (title: string) => {
  localRoom.value.title = title
}

const store = useStore()

store.dispatch('setSpecialContainerClass', localRoom.value.appearance)

onBeforeUnmount(() => {
  store.dispatch('setSpecialContainerClass', '')
})
</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>
