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

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

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;
    },
    submit() {
      this.$emit('submit', this.text);
      this.text = '';
    },
  },
};
</script>
