<template>
  <modal :hide-header="false">
    <h2
      class="project-entry-modal__heading"
      data-cy="modal-title"
      slot="header">
      Beitrag erfassen
    </h2>
    <div class="project-entry-modal">
      <div class="project-entry-modal__form-field">
        <textarea
          :value="localProjectEntry.description"
          class="project-entry-modal__textarea"
          data-cy="project-entry-textarea"
          @input="localProjectEntry.description = $event.target.value"
        />

        <div class="project-entry-modal__buttons">
          <button-with-icon-and-text
            icon="document-with-lines-icon"
            data-cy="use-template-button"
            text="Vorlage nutzen"
            @click.native="useTemplate" />

          <file-upload
            :with-text="true"
            :document="localProjectEntry.documentUrl"
            data-cy="upload-document-button"
            @change-document-url="setDocumentUrl" />
        </div>
      </div>
    </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';
  import TextForm from '@/components/content-forms/TextForm';
  import DocumentIcon from '@/components/icons/DocumentIcon';
  import NoteIcon from '@/components/icons/NoteIcon';
  import ButtonWithIconAndText from '@/components/ui/ButtonWithIconAndText';
  import SimpleFileUpload from '@/components/ui/file-upload/SimpleFileUpload';
  import FileUpload from '@/components/ui/file-upload/FileUpload';
  import {PROJECT_ENTRY_TEMPLATE} from '@/consts/strings.consts';

  export default {
    props: {
      projectEntry: {
        type: Object,
        default: null,
      },
    },

    components: {
      FileUpload,
      SimpleFileUpload,
      ButtonWithIconAndText,
      NoteIcon,
      DocumentIcon,
      TextForm,
      DocumentForm,
      Modal,
      TextFormWithHelpText,
    },

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

    methods: {
      setDocumentUrl(url) {
        this.localProjectEntry.documentUrl = url;
      },
      useTemplate() {
        this.localProjectEntry.description = `${this.localProjectEntry.description}${PROJECT_ENTRY_TEMPLATE}`;
      },
    },
  };
</script>

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

  .project-entry-modal {
    display: flex;
    flex-direction: column;

    &__form-field {
      @include inputstyle;
      padding: 0;
      display: flex;
      flex-direction: column;
      grid-template-rows: auto 1rem;
      grid-template-columns: 1fr 1fr;
      width: 100%;
    }

    &__textarea {
      @include auto-grow;
      border: 0;
      min-height: 400px;
      padding: $medium-spacing;
    }

    &__buttons {
      display: grid;
      grid-template-columns: 1fr 1fr;
      padding: $medium-spacing;
    }

    &__button {
      @include regular-text;

      &--template {
      }

      &--document {
      }
    }

    &__heading {
      @include heading-3;
      margin-bottom: 0;
    }

  }

</style>
