<template>
  <div class="feedback__submission submission-form-container">
    <div class="submission-form-container__inputs">
      <submission-input
        :input-text="userInput.text"
        :saved="saved"
        :readonly="isFinalOrReadOnly"
        :placeholder="placeholder"
        @input="saveInput"
      />
    </div>

    <div
      class="submission-form-container__actions"
      v-if="!isFinalOrReadOnly">
      <button
        class="submission-form-container__submit button button--primary button--white-bg"
        data-cy="submission-form-submit"
        @click="$emit('turnIn')"
      >{{ action }}
      </button>
      <button
        class="submission-form-container__submit submission-form-container__spellcheck button button--primary button--white-bg"
        data-cy="spellcheck-button"
        v-if="showSpellcheckButton"
        @click="$emit('spellcheck')"
      >{{ spellcheckText }}
      </button>
      <file-upload
        :document="userInput.document"
        v-if="allowsDocuments"
        @change-document-url="changeDocumentUrl"/>
      <slot/>
    </div>

    <final-submission
      :user-input="userInput"
      :shared-msg="sharedMsg"
      :show-reopen="!readOnly"
      v-if="isFinalOrReadOnly"
      @reopen="$emit('reopen')"/>
  </div>
</template>

<script>
  import SubmissionInput from '@/components/content-blocks/assignment/SubmissionInput';
  import FinalSubmission from '@/components/content-blocks/assignment/FinalSubmission';
  import DocumentBlock from '@/components/content-blocks/DocumentBlock';
  import FileUpload from '@/components/ui/file-upload/FileUpload';

  export default {
    props: {
      userInput: Object,
      saved: Boolean,
      placeholder: String,
      action: String,
      reopen: Function,
      document: String,
      readOnly: {
        type: Boolean,
        default: false,
      },
      spellcheck: {
        type: Boolean,
        default: false,
      },
      spellcheckLoading: {
        type: Boolean,
        default: false,
      },
      sharedMsg: String,
    },

    components: {
      FileUpload,
      SubmissionInput,
      FinalSubmission,
      DocumentBlock,
    },

    computed: {
      final() {
        return !!this.userInput && this.userInput.final;
      },
      isFinalOrReadOnly() {
        return this.final || this.readOnly;
      },
      allowsDocuments() {
        return 'document' in this.userInput;
      },
      showSpellcheckButton() {
        return this.spellcheck && process.env.VUE_APP_ENABLE_SPELLCHECK;
      },
      spellcheckText() {
        if (!this.spellcheckLoading) {
          return 'Rechtschreibung prüfen';
        } else {
          return 'Wird geprüft...';
        }
      },
    },

    methods: {
      reopenSubmission() {
        this.$emit('reopen');
      },
      saveInput(input) {
        this.$emit('saveInput', input);
      },
      changeDocumentUrl(documentUrl) {
        this.$emit('changeDocumentUrl', documentUrl);
      },
    },

  };
</script>

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

  .submission-form-container {
    @include form-with-border;

    margin-bottom: $medium-spacing;

    &__inputs {
      margin-bottom: 12px;
    }

    &__submit {
      margin-right: $medium-spacing;
    }

    &__actions {
      display: flex;
      align-items: center;
    }

    &__document {
      &:hover {
        cursor: pointer;
      }
    }

    &__spellcheck {
      /* so the button does not change size when changing the text */
      width: 235px;
      text-align: center;
      display: inline-block;
    }
  }

</style>
