<template>
  <div :class="['emoji-picker', !isPC && 'emoji-picker-h5']">
    <div :class="['emoji-picker-list', !isPC && 'emoji-picker-h5-list']">
      <div
        v-for="emojiKey in Object.keys(props.emojiConfig.emojiUrlMapping)"
        :key="emojiKey"
        class="emoji-picker-list-item"
        @click="selectEmoji(emojiKey)"
      >
        <img
          class="emoji"
          :src="props.emojiConfig.emojiBaseUrl + props.emojiConfig.emojiUrlMapping[emojiKey]"
        >
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import vue from '../../../adapter-vue';
import { isPC } from '../../../utils/env';

const { ref } = vue;

interface Props {
  emojiConfig: Record<string, any>;
}
export default {
  props: {
    emojiConfig: {
      type: Object as () => Record<string, any>,
      default: () => ({}),
    },
  },
  emits: ['selectEmoji'],
  setup(props: Props, { emit }) {
    const emojiPickerListRef = ref();
    const selectEmoji = (reactionID: string) => {
      emit('selectEmoji', reactionID);
    };
    return {
      emojiPickerListRef,
      selectEmoji,
      props,
      isPC,
    };
  },
};
</script>
<style lang="scss" scoped src="./style/index.scss"></style>
