<template>
  <modal :hide-header="true">
    <div class="project-entry-modal">
      <text-form-with-help-text
        :value="localProjectEntry.activity"
        title="Tätigkeit"
        data-cy="activity-input"
        help-text="Was? Wie? Mittel?"
        @change="localProjectEntry.activity = $event"/>
      <text-form-with-help-text
        :value="localProjectEntry.reflection"
        title="Reflexion"
        data-cy="reflection-input"
        help-text="Nachdenken über die eigene Tätigkeit und das eigene Handeln. Was ging gut? Was hatte ich für Schwierigkeiten? Was habe ich gelernt?"
        @change="localProjectEntry.reflection = $event"/>
      <text-form-with-help-text
        :value="localProjectEntry.nextSteps"
        title="Nächste Schritte"
        data-cy="next-steps-input"
        help-text="Wie geht es weiter? Wer macht was?"
        @change="localProjectEntry.nextSteps = $event"/>
      <document-form
        :value="document"
        :index="0"
        @link-change-url="setDocumentUrl"/>
    </div>
    <div slot="footer">
      <a
        class="button button--primary"
        data-cy="modal-save-button"
        @click="$emit('save', localProjectEntry)">Speichern</a>
      <a
        class="button"
        @click="$emit('hide')">Abbrechen</a>
    </div>
  </modal>
</template>

<script>
  import Modal from '@/components/Modal';
  import TextFormWithHelpText from '@/components/content-forms/TextFormWithHelpText';
  import DocumentForm from '@/components/content-forms/DocumentForm';

  export default {
    props: ['project-entry'],

    components: {
      DocumentForm,
      Modal,
      TextFormWithHelpText
    },

    data() {
      return {
        localProjectEntry: Object.assign({}, {
          ...this.projectEntry
        })
      };
    },

    computed: {
      document() {
        return this.localProjectEntry.documentUrl > '' ? {
          url: this.localProjectEntry.documentUrl
        } : {};
      }
    },

    methods: {
      setDocumentUrl(url) {
        this.localProjectEntry.documentUrl = url;
      },
    }
  };
</script>
