/*
 * @Author       : Eleanor Mao
 * @Date         : 2024-04-09 14:46:24
 * @LastEditTime : 2024-04-09 14:46:24
 *
 *
 */
import React, { FC } from "react";
import { styled } from '@mui/material/styles';
import ListItem from '@mui/material/ListItem';
import SmartToyOutlinedIcon from '@mui/icons-material/SmartToyOutlined';
import Box from '@mui/material/Box';
import FaceIcon from '@mui/icons-material/Face';
import CircularProgress from '@mui/material/CircularProgress';

interface Props {
  isMe: boolean;
  message: string;
  loading?: boolean;
}


const ChatWrap = styled(ListItem)<{ isMe: boolean }>(({ isMe }) => ({
  display: 'flex',
  flexDirection: isMe ? 'row-reverse' : 'row',
  marginBottom: 8,
  gap: 8
}));

const ChatAvatar = styled('div')(() => ({
  minWidth: 42,
  flexShrink: 0,
  marginTop: 8,
}));


const ChatMessageWrap = styled(Box)<{ isMe: boolean }>(({ isMe }) => ({
  flex: '1 1 auto',
  minWidth: 0,
  marginTop: 4,
  marginBottom: 4,
  display: 'flex',
  justifyContent: isMe ? 'flex-end' : 'flex-start',
  color: isMe ? 'rgba(0, 0, 0, 0.87)' : 'white'
}));

const ChatMessage = styled(Box)(() => ({
  maxWidth: 'calc(100% - 50px)',
  whiteSpace: 'pre-line'
}));
export const ChatItem: FC<Props> = ({ isMe, message, loading }) => {
  return (
    <ChatWrap isMe={isMe} alignItems="flex-start">
      <ChatAvatar>
        {isMe ? <FaceIcon style={{ fontSize: 42 }} color="primary"/> :
          <SmartToyOutlinedIcon style={{ fontSize: 42 }} color="secondary"/>}
      </ChatAvatar>
      <ChatMessageWrap isMe={isMe}>
        <ChatMessage sx={{ borderRadius: 2, p: 2, bgcolor: isMe ? 'primary.light' : 'secondary.light' }}>
          {loading && <CircularProgress color="secondary" size={20}/>}
          {!loading && message}
        </ChatMessage>
      </ChatMessageWrap>
    </ChatWrap>
  );
};