<template>
  <div
    class="ac-compose-message"
  >
    <b-input-group class="ac_message">
      <ac-mentions
        ref="ac_mentions"
        v-model="input_value"
        :options="options"
        class="ac_mentions"
        @input="$emit('input', input_value)"
        @enter="$emit('enter', input_value)"
      />

      <b-input-group-append>
        <b-button
          variant="outline-secondary"
          @click="on_mention_click('@')"
        >
          @
        </b-button>
        <b-button
          variant="outline-secondary"
          @click="toggle_emoji_picker"
        >
          emoji
        </b-button>
      </b-input-group-append>
    </b-input-group>

    <ac-emoji
      v-show="show_emoji_picker"
      class="ml-auto"
      @select="on_emoji_select"
    />
  </div>
</template>

<script>
// import acMentions from '../../../appup-mentions/src/components/ac-mentions.vue';
// import acEmoji from 'emoji-mart-vue';

export default {
  name: 'ac-compose-message',
  
  // components: {
  //   acMentions,
  //   acEmoji
  // },

  props: {
    /**
     * @param {array} options - Array of options for mentions
     */
    options: {
      type: Array,
      required: true,
    },

    /**
     * @param {string} value - v-model value
     */
    value: {
      type: String,
      required: false,
      default: '',
    },
  },

  data() {
    return {
      show_emoji_picker: false,
      input_value: '',
    }
  },

  watch: {
    value(val) {
      this.input_value = val
    },
  },

  methods: {
    /**
     * @function on_mention_click - triggers on mention click
     * @prop {string} trigger - trigger for mention to trigger
     */
    on_mention_click(trigger) {
      this.$refs.ac_mentions.run_trigger(trigger)
    },

    /**
     * @function toggle_emoji_picker - toggle emoji picker
     */
    toggle_emoji_picker() {
      this.show_emoji_picker = !this.show_emoji_picker
    },

    /**
     * @function on_emoji_select - runs on emoji select
     */
    on_emoji_select(e) {
      console.log('emoji picked', e)
    },
  },
}
</script>

<style scoped>
  .ac-compose-message .ac_message {
    display: flex;
  }

  .ac_mentions {
    flex: auto;
  }
</style>
