import type React from 'react';
import { useEffect, useState } from 'react';
import { useUIKit, IconBeautyAR } from '@tencentcloud/uikit-base-component-react';
import cs from 'classnames';
import { Popup } from '../../../baseComp/Popup';
import { View } from 'tuikit-atomicx-react/chat';
import { emojiUrlMap, emojiBaseUrl } from '../../../constant/emoji';
import { useChatUIState } from '../../../context/useChatUIState';
import { MessageContentType } from '../../../types/messageInput';
import { transformTextWithEmojiKeyToName } from '../../../utils/emoji';
import classes from './EmojiPicker.module.scss';

interface EmojiPickerProps {
  className?: string;
  style?: React.CSSProperties;
  disabled?: boolean;
}

function EmojiPicker({
  className = '',
  style = {},
  disabled = false,
}: EmojiPickerProps) {
  const { t, direction } = useUIKit();
  const { insertInputContent } = useChatUIState();
  const [anchor, setAnchor] = useState<Element | null>(null);

  // image preload
  useEffect(() => {
    Object.values(emojiUrlMap).forEach((url) => {
      const img = new Image();
      img.src = emojiBaseUrl + url;
    });
  }, []);

  function insertEmojiToInput(emojiKey: string) {
    if (emojiKey) {
      insertInputContent([{
        type: MessageContentType.EMOJI,
        content: {
          url: emojiBaseUrl + emojiUrlMap[emojiKey],
          key: emojiKey,
          text: transformTextWithEmojiKeyToName(emojiKey),
        },
      }]);
    }
  }

  function onEmojiPickerClickAway() {
    setAnchor(null);
  }

  return (
    <View className={classes['emoji-picker']}>
      <div
        title={t('MessageInput.emoji')}
        onClick={(e: React.MouseEvent<HTMLDivElement>) => {
          if (disabled) return;
          setAnchor(e.currentTarget);
        }}
      >
        <IconBeautyAR
          className={cs(classes['emoji-picker__icon'], { [classes['emoji-picker__icon--disabled']]: disabled }, className)}
          style={style}
          size="28px"
        />
      </div>
      <Popup
        open={Boolean(anchor)}
        onOpenChange={(open) => {
          if (!open) {
            onEmojiPickerClickAway();
          }
        }}
        anchor={anchor}
        placement={direction === 'ltr' ? 'top-start' : 'top-end'}
        offset={10}
      >
        <View className={classes['emoji-picker__list']}>
          {
            Object.keys(emojiUrlMap).map((emojiKey: string) => (
              <View
                className={classes['emoji-picker__list-item']}
                key={emojiKey}
                onClick={() => {
                  insertEmojiToInput(emojiKey);
                  setAnchor(null);
                }}
              >
                <img
                  src={emojiBaseUrl + emojiUrlMap[emojiKey]}
                  alt={t(`Emoji.${emojiKey}`)}
                />
              </View>
            ))
          }
        </View>
      </Popup>
    </View>
  );
}

export { EmojiPicker };