<template>
  <div
    class="final-submission"
    data-cy="final-submission">
    <document-block
      :value="{url: userInput.document}"
      class="final-submission__document"
      v-if="userInput.document"
    />
    <div class="final-submission__explanation">
      <info-icon class="final-submission__explanation-icon"/>
      <span class="final-submission__explanation-text">{{ sharedMsg }}</span>
      <a
        class="final-submission__reopen"
        data-cy="final-submission-reopen"
        v-if="showReopen"
        @click="$emit('reopen')">Bearbeiten</a>
    </div>
  </div>
</template>

<script>
  import InfoIcon from '@/components/icons/InfoIcon';
  import DocumentBlock from '@/components/content-blocks/DocumentBlock';
  import {newLineToParagraph} from '@/helpers/text';

  export default {
    props: {
      userInput: {
        type: Object,
        default: () => ({})
      },
      showReopen: {
        type: Boolean,
        default: true
      },
      sharedMsg: {
        type: String,
        default: ''
      }
    },

    components: {
      InfoIcon,
      DocumentBlock,
    },

    computed: {
      text() {
        return newLineToParagraph(this.userInput.text);
      }
    }
  };
</script>

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

  .final-submission {
    &__text {
      background-color: $color-white;
      @include input-box-shadow;
      border-radius: $input-border-radius;
      padding: 15px;
      font-size: toRem(17px);
      font-family: $sans-serif-font-family;
      margin-bottom: 20px;
      font-weight: $font-weight-regular;

      overflow-wrap: break-word;
      word-wrap: break-word;
      hyphens: auto;
      word-break: break-word;
    }

    &__document {
      margin-bottom: $small-spacing;
    }

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

    &__explanation-icon {
      width: 40px;
      height: 40px;
      fill: $color-brand;
      margin-right: 8px;
    }

    &__explanation-text {
      color: $color-brand;
      font-family: $sans-serif-font-family;
      font-weight: $font-weight-regular;
      margin-right: $medium-spacing;
    }

    &__reopen {
      @include small-text;
      cursor: pointer;
      color: $color-charcoal-light;
    }
  }
</style>
