<template>
  <div>
    <div class="emoji-reaction">
      <div class="emoji-reaction-icon">
        <div
          v-for="emojiItem in emojiExpandList"
          :key="emojiItem"
          class="emoji-list-item"
          @click.stop="emojiAction(emojiItem)"
        >
          <img
            class="emoji-list-item-icon"
            :src="emojiConfig.emojiBaseUrl + emojiConfig.emojiUrlMapping[emojiItem]"
          >
        </div>
        <div @click.stop="actionEmojiPicker()">
          <Icon
            :file="iconArrow"
            width="22px"
            height="22px"
          />
        </div>
      </div>
    </div>
    <EmojiPickerDialog
      v-if="isShowEmojiPicker"
      :emojiConfig="emojiConfig"
      @selectEmoji="emojiAction"
    />
  </div>
</template>
<script lang="ts">
import vue from '../../adapter-vue';
import TUICore, { TUIConstants } from '@tencentcloud/tui-core-lite';
import {
  TUIStore,
  StoreName,
  IMessageModel,
  TUIChatService,
  TUITranslateService,
} from '@tencentcloud/chat-uikit-engine-lite';
import EmojiPickerDialog from './emoji-picker/index.vue';
import { Toast, TOAST_TYPE } from '../common/Toast/index';
import Icon from '../common/Icon.vue';
import rightArrow from '../assets/icon/right_arrow.svg';
import downArrow from '../assets/icon/down_arrow.svg';

const { ref, computed } = vue;

interface Props {
  message: IMessageModel;
  emojiConfig: Record<string, any>;
}

export default {
  components: {
    EmojiPickerDialog,
    Icon,
  },
  props: {
    message: {
      type: Object as () => IMessageModel,
      default: () => ({}),
    },
    emojiConfig: {
      type: Object as () => Record<string, any>,
      default: () => ({}),
    },
  },
  setup(props: Props) {
    const { message, emojiConfig } = props;
    const iconArrow = ref(rightArrow);
    const isShowEmojiPicker = ref(false);
    const currentUserID = ref<string>('');
    const emojiExpandList = computed(() => {
      return Object.keys(emojiConfig.emojiUrlMapping).slice(0, 6);
    });

    TUIStore.watch(StoreName.USER, {
      userProfile: (profile: Record<string, any>) => {
        currentUserID.value = profile?.userID;
      },
    });

    const emojiAction = async (reactionID: string) => {
      const reactionList = message?.reactionList;
      TUICore.callService({
        serviceName: TUIConstants.TUIChat.SERVICE.NAME,
        method: TUIConstants.TUIChat.SERVICE.METHOD.CLOSE_MESSAGE_POP_MENU,
        params: {},
      });
      if (reactionList.length === 0) {
        addMessageReaction(message, reactionID);
        return;
      }
      const isReactedByMe = await filterReactionEmojiByMe(reactionID, reactionList) > -1 ? true : false;
      if (isReactedByMe) {
        TUIChatService.removeMessageReaction(message, reactionID);
      } else {
        addMessageReaction(message, reactionID);
      }
    };
    // todo : sdk 已支持
    const filterReactionEmojiByMe = async (
      reactionID: string,
      reactionList: any,
    ) => {
      const searchEmojiResult = reactionList.findIndex((item: any) => item.reactionID === reactionID);
      if (searchEmojiResult > -1) {
        const options: any = {
          message: message,
          reactionID,
          nextSeq: 0,
          count: 100,
        };
        const allUserList = await TUIChatService.getAllUserListOfMessageReaction(
          options,
        );
        const { userList } = allUserList.data;
        const isReactedByMe = userList.findIndex(item => item.userID === currentUserID.value);
        return isReactedByMe;
      }
    };

    const addMessageReaction = (message: IMessageModel, reactionID: string) => {
      TUIChatService.addMessageReaction(message, reactionID).catch((err) => {
        if (err.code === 23005) {
          Toast({
            message: TUITranslateService.t('TUIChat.已达到表情回应上限数量'),
            type: TOAST_TYPE.ERROR,
            duration: 3000,
          });
        }
      });
    };

    const actionEmojiPicker = () => {
      isShowEmojiPicker.value = !isShowEmojiPicker.value;
      iconArrow.value = isShowEmojiPicker.value ? downArrow : rightArrow;
    };
    return {
      iconArrow,
      isShowEmojiPicker,
      currentUserID,
      emojiExpandList,
      emojiAction,
      filterReactionEmojiByMe,
      addMessageReaction,
      actionEmojiPicker,
      props,
    };
  },
};
</script>
<style lang="scss" scoped>
.emoji-reaction {
  width: 280px;

  .emoji-reaction-icon {
    display: flex;
    justify-content: space-around;
    align-items: center;

    .emoji-list-item {
      padding: 10px 0;

      .emoji-list-item-icon {
        width: 28px;
        height: 28px;
      }
    }
  }
}
</style>
