import { Image } from '@tarojs/components';

import { useCallback } from 'react';

import { PageUrl } from '@/constants/app';
import { MainMessage } from '@/types/message';
import { navigateTo } from '@/utils/route';
import { formatTime } from '@/utils/time';

import './index.less';

interface IProps {
  data: MainMessage;
}

const PREFIX = 'message-card';

function MessageCard(props: IProps) {
  const { data } = props;

  const handleClick = useCallback(() => navigateTo(PageUrl.MessageChat, { chatId: data.chatId }), [data]);

  return (
    <div className={PREFIX} onClick={handleClick}>
      <div className={`${PREFIX}__avatar-container`}>
        <Image
          mode="aspectFit"
          className={`${PREFIX}__avatar`}
          src={data.toUserAvatarUrl || require('@/statics/png/default_avatar.png')}
        />
        {!!data.unReadMsgCount && <div className={`${PREFIX}__unread`}>{Math.min(data.unReadMsgCount, 999)}</div>}
      </div>
      <div className={`${PREFIX}__body-container`}>
        <div className={`${PREFIX}__name`}>{data.toUserName}</div>
        <div className={`${PREFIX}__content`}>{data.lastContactMsgContent}</div>
        <div className={`${PREFIX}__time`}>{formatTime(data.lastContactTime, 'MM-DD')}</div>
      </div>
    </div>
  );
}

export default MessageCard;
