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

    <div class="submission-form-container__actions" v-if="!final">
      <button class="submission-form-container__submit button button--primary button--white-bg"
              @click="$emit('turnIn')"
      >{{action}}
      </button>
      <button
        class="submission-form-container__submit submission-form-container__spellcheck button button--primary button--white-bg"
        v-if="spellcheck"
        @click="$emit('spellcheck')"
      >Rechtschreibung prüfen
      </button>
      <div v-if="userInput.document">
        <document-block
          :value="{url: userInput.document}"
          show-trash-icon
          v-on:trash="changeDocumentUrl('')"
        ></document-block>
      </div>

      <simple-file-upload
        v-if="allowsDocuments"
        v-on:link-change-url="changeDocumentUrl"
        :value="userInput.document"
        class="submission-form-container__document"
      ></simple-file-upload>
      <slot></slot>
    </div>

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

<script>
  import SubmissionInput from '@/components/content-blocks/assignment/SubmissionInput';
  import FinalSubmission from '@/components/content-blocks/assignment/FinalSubmission';
  import SimpleFileUpload from '@/components/SimpleFileUpload';
  import DocumentBlock from '@/components/content-blocks/DocumentBlock';

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

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

    computed: {
      final() {
        return !!this.userInput && this.userInput.final
      },
      allowsDocuments() {
        return 'document' in this.userInput;
      }
    },

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

  }
</script>

<style scoped lang="scss">
  @import '@/styles/_mixins.scss';

  .submission-form-container {

    @include input-box-shadow;
    background-color: $color-white;
    border-radius: $input-border-radius;
    border: 1px solid $color-silver;
    padding: $medium-spacing;
    margin-bottom: $medium-spacing;

    &__inputs {
      margin-bottom: 12px;
    }

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

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

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

</style>
