import { View, Image } from '@tarojs/components';
import BoyIcon from '../../images/home/bg_touxiang_boy@2x.png';
import GirlIcon from '../../images/home/bg_touxiang_girl@2x.png';
import ReplayIcon from '../../images/home/ic_fankui_kefu@2x.png';
import './Message.scss';
import { CustomerSex } from '@/types/Customer/Customer';

export enum MessageType {
  user = 'user',
  replay = 'replay',
}

const Message = ({
  type,
  content,
  time,
  userData,
}: {
  type: MessageType;
  content: string;
  time: string;
  userData: {
    customerHead: null | string;
    customerSex: string;
  };
}) => {
  return (
    <View
      className={`Message ${type === MessageType.user ? 'user' : 'replay'}`}>
      {type === MessageType.replay && (
        <View className='Message-UserHeader'>
          <Image className='Message-UserHeader-img' src={ReplayIcon} />
        </View>
      )}
      <View className='Message-Content'>
        <View className='Message-Content-msg'>{content}</View>
        <View className='Message-Content-time'>{time}</View>
      </View>
      {type === MessageType.user && (
        <View className='Message-UserHeader'>
          {userData.customerHead ? (
            <Image
              className='Message-UserHeader-img'
              src={userData.customerHead}
            />
          ) : userData.customerSex === CustomerSex.boy ? (
            <Image className='Message-UserHeader-img' src={BoyIcon} />
          ) : (
            <Image className='Message-UserHeader-img' src={GirlIcon} />
          )}
        </View>
      )}
    </View>
  );
};

export default Message;
