import cs from 'classnames';
import { View } from 'tuikit-atomicx-react/chat';
import { isCallMessage } from '../../../../utils/call';
import { isSafeUrl } from '../../../../utils/url';
import { CallMessage } from './CallMessage';
import classes from './CustomMessage.module.scss';
import type { MessageInfo, CustomMessagePayload } from 'tuikit-atomicx-react/chat';

interface CustomMessageProps {
  message: MessageInfo;
}

interface CustomMessageData {
  businessID: string;
  [key: string]: any;
}

function CustomMessage(props: CustomMessageProps) {
  const { message } = props;

  const bubbleClasses = cs(classes['custom-message'], {
    [classes['custom-message--self']]: message.isSentBySelf,
    [classes['custom-message--other']]: !message.isSentBySelf,
  });

  if (isCallMessage(message)) {
    return (
      <CallMessage message={message} />
    );
  }

  try {
    const payload = message.messagePayload as CustomMessagePayload;
    const { businessID, ...restData } = JSON.parse(payload.customData) as CustomMessageData;
    if (businessID === 'text_link') {
      // `link` is attacker-controlled, so only render the anchor when it
      // resolves to an allowed protocol; otherwise keep the plain text.
      const link = isSafeUrl(restData.link) ? restData.link : '';
      return (
        <View className={bubbleClasses}>
          <div>{restData.text}</div>
          {link
            ? (
              <a href={link}>
                read more &nbsp;
                {'>>>'}
              </a>
            )
            : null}
        </View>
      );
    }
    return (
      <div className={bubbleClasses}>
        [custom message]
      </div>
    );
  } catch {
    return (
      <div className={bubbleClasses}>
        [custom message]
      </div>
    );
  }
}

export {
  CustomMessage,
}