<template>
  <div class="comment-input">
    <emoji-bar @add-emoji="addEmoji" />
    <textarea
      :value="text"
      data-cy="comment-textarea"
      class="comment-input__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>

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

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

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