import { useMemo } from 'react';
import { IconCallFilled, IconVideoFilled } from '@tencentcloud/uikit-base-component-react';
import cs from 'classnames';
import { View } from 'tuikit-atomicx-react/chat';
import { ConversationType } from 'tuikit-atomicx-react/chat';
import { useUIContext } from 'tuikit-atomicx-react/chat';
import { parseCallMessage, startCall, parseCallMessageText } from '../../../../../utils/call';
import classes from '../CustomMessage.module.scss';
import type { MessageInfo } from 'tuikit-atomicx-react/chat';

interface CallMessageProps {
  message: MessageInfo;
}

function CallMessage(props: CallMessageProps) {
  const { message } = props;
  const { activeConversation } = useUIContext();

  const text = useMemo(() => parseCallMessageText(message), [message.msgID]);
  const payload = useMemo(() => parseCallMessage(message), [message.msgID]);

  const isC2C = activeConversation?.type === ConversationType.C2C;

  const callAgain = () => {
    if (!isC2C || !activeConversation || !payload) {
      return;
    }
    startCall({
      type: payload.data.data.call_type,
      userIDList: [activeConversation.conversationID.replace(/^C2C/, '')],
    });
  };

  return isC2C
    ? (
      <View flexDir="row" gap={8} className={cs(classes['custom-message'], classes['call-message-c2c'], {
        [classes['custom-message--self']]: message.isSentBySelf,
        [classes['custom-message--other']]: !message.isSentBySelf,
      })} onClick={callAgain}>
        <div className={classes['call-message-c2c__icon']}>
          {payload?.data.data.call_type === 1 ? <IconCallFilled /> : <IconVideoFilled />}
        </div>
        {text}
      </View>
    )
    : (
      <View className={cs(classes['call-message-group'])}>
        {text}
      </View>
    );
}

export {
  CallMessage,
};