<template>
  <div class="submission-form__text-answer submission-form">
    <textarea
      v-auto-grow
      :placeholder="placeholder"
      :readonly="readonly"
      :value="inputText"
      :class="{'submission-form__textarea--readonly': readonly}"
      data-cy="submission-textarea"
      rows="1"
      class="submission-form__textarea"
      @input="$emit('input', $event.target.value)"
    />
    <div
      class="submission-form__save-status submission-form__save-status--saved"
      v-if="saved">
      <tick-circle-icon class="submission-form__save-status-icon"/>
    </div>
    <div
      class="submission-form__save-status submission-form__save-status--unsaved"
      v-if="!saved">
      <loading-icon class="submission-form__save-status-icon submission-form__saving-icon"/>
    </div>
  </div>
</template>

<script>
  import TickCircleIcon from '@/components/icons/TickCircleIcon';
  import LoadingIcon from '@/components/icons/LoadingIcon';

  export default {
    props: {
      inputText: String,
      saved: Boolean,
      readonly: Boolean,
      placeholder: {
        type: String,
        default: 'Ergebnis erfassen'
      }
    },
    components: {
      TickCircleIcon,
      LoadingIcon
    }
  };
</script>

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

  .submission-form {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    &__textarea {
      @include borderless-textarea;
    }

    &__save-status {
      position: relative;
      align-items: center;
    }

    &__save-status-icon {
      width: 22px;
      height: 22px;
      fill: $color-silver-dark;
    }

    &__saving-icon {
      @include spin;
    }
  }
</style>
