<template>
  <div>
    <NcRichContenteditable
      :value.sync="message"
      :auto-complete="autoComplete"
      :maxlength="100"
      :user-data="userData"
      placeholder="Try mentioning user @Test01 or inserting emoji :smile"
      @submit="onSubmit"
    />
    <br />

    <NcRichContenteditable
      :value.sync="message"
      :auto-complete="autoComplete"
      :maxlength="400"
      :multiline="true"
      :user-data="userData"
      placeholder="Try mentioning user @Test01 or inserting emoji :smile"
      @submit="onSubmit"
    />
    <br />
    <br />
    {{ JSON.stringify(message) }}
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: "Lorem ipsum dolor sit amet.",

      // You need to provide this for the inline
      // mention to understand what to display or not.
      userData: {
        Test01: {
          icon: "icon-user",
          id: "Test01",
          label: "Test01",
          source: "users",
          primary: true
        },
        Test02: {
          icon: "icon-user",
          id: "Test02",
          label: "Test02",
          source: "users",
          status: {
            clearAt: null,
            icon: "🎡",
            message: "Visiting London",
            status: "away"
          },
          subline: "Visiting London"
        },
        "Test 03": {
          icon: "icon-user",
          id: "Test 03",
          label: "Test 03",
          source: "users",
          status: {
            clearAt: null,
            icon: "🎡",
            message: "Having space in my name",
            status: "in space"
          },
          subline: "Visiting London"
        }
      }
    };
  },
  methods: {
    /**
     * Do your own query to the autocompletion api.
     * The returned data bellow is a fake data example.
     * The callback expects the same format returned by the core/autocomplete/get ocs api endpoint!
     * @see userData example above
     *
     * @param {string} search the query
     * @param {Function} callback the callback to process the results with
     */
    autoComplete(search, callback) {
      callback(Object.values(this.userData));
    },
    onSubmit() {
      alert(this.message);
    }
  }
};
</script>