<template>
  <page-form @save="$emit('save', localProject)" title="Neues Projekt">
    <page-form-input label="Titel" v-model="localProject.title"></page-form-input>
    <page-form-input label="Beschreibung" type="textarea" v-model="localProject.description"></page-form-input>
    <page-form-input label="Ziele" type="textarea" v-model="localProject.objectives"></page-form-input>
    <color-chooser
      :selected-color="localProject.appearance"
      v-on:input="updateColor"
    ></color-chooser>
    <template slot="footer">
      <button
        type="submit"
        class="button button--primary"
        data-cy="save-project-button"
        :class="{'button--disabled': !formValid}"
        :disabled="!formValid"
      >Speichern
      </button>
      <router-link to="/portfolio" tag="button" class="button">Abbrechen</router-link>
    </template>
  </page-form>
</template>

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

  export default {
    props: ['project'],

    components: {
      PageForm,
      PageFormInput,
      ColorChooser
    },

    computed: {
      formValid() {
        return this.localProject.title && this.localProject.description && this.localProject.objectives;
      }
    },

    data() {
      return {
        localProject: Object.assign({}, this.project),
      }
    },

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

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

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