<template>
  <div class="comment-input">
    <emoji-bar @add-emoji="addEmoji"/>
    <textarea
      v-auto-grow
      :value="text"
      data-cy="comment-textarea"
      class="comment-input__textarea"
      placeholder="Kommentar erfassen"
      @input="updateValue($event.target.value)"
    />
    <a
      data-cy="submit-comment"
      class="button button--primary"
      @click="$emit('submit', text)">Kommentar teilen</a>
  </div>
</template>

<script>
  import EmojiBar from '@/components/ui/EmojiBar';

  export default {
    props: {
      value: {
        type: String,
        default: '',
      },
    },
    components: {
      EmojiBar,
    },
    data() {
      return {
        text: this.value
      };
    },
    methods: {
      updateValue(text) {
        this.text = text;
      },
      addEmoji(emoji) {
        this.text = this.text + emoji;
      }
    },
  };
</script>

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

  .comment-input {
    @include form-with-border;

    &__textarea {
      @include borderless-textarea;
    }
  }
</style>
