<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 { newLineToParagraph } from '@/helpers/text';
import { defineAsyncComponent } from 'vue';
const DocumentBlock = defineAsyncComponent(() =>
  import('@/components/content-blocks/DocumentBlock.vue')
);

const InfoIcon = defineAsyncComponent(() => import('@/components/icons/InfoIcon.vue'));

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: $medium-spacing;
    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: $large-icon-dimension;
    height: $large-icon-dimension;
    fill: $color-brand;
    margin-right: $small-spacing;
  }

  &__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>
