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

      <div class="submissionform-container__actions" v-if="!final">
        <button class="submissionform-container__submit button button--primary button--white-bg"
          @click="$emit('turnIn')"
        >{{action}}
        </button>
        <slot></slot>
      </div>

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

<script>
  import SubmissionForm from '@/components/content-blocks/assignment/SubmissionForm';
  import FinalSubmission from '@/components/content-blocks/assignment/FinalSubmission';

  export default {
    components: {
      SubmissionForm,
      FinalSubmission
    },

    props: ['userInput', 'saved', 'placeholder', 'action', 'reopen', 'document', 'sharedMsg'],

    computed: {
      final() {
        return !!this.userInput && this.userInput.final
      }
    },

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

  }
</script>

<style scoped lang="scss">
</style>
