import React from 'react';
import { Box, Typography } from '@mui/material';
import { styled } from '@mui/material/styles';
import { ChatMessageProps } from '@/interfaces';

const Item = styled(Box)<{
  orient?: string;
}>(({ orient }) => ({
  borderColor: '#ccc',
  display: 'flex',
  position: 'relative',
  width: '100%',
  justifyContent: orient === 'replay' ? 'flex-end' : 'flex-start',
  marginBottom: '10px',
  alignItems: 'center',
}));

const ContainerStyled = styled(Box)({
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  minWidth: '640px',
  backgroundColor: '#F0F0F0',
  padding: '10px',
});

const BoxStyled = styled(Box)<{
  orient?: string;
}>(({ orient }) => ({
  width: '70%',
  backgroundColor: orient === 'replay' ? '#E18B50' : '#FFF',
  color: orient === 'replay' ? '#FFF' : '#4D4F5C',
  borderTopLeftRadius: 30,
  borderTopRightRadius: 30,
  borderBottomLeftRadius: orient === 'me' ? 2 : 30,
  borderBottomRightRadius: orient === 'me' ? 30 : 2,
  marginLeft: orient === 'replay' ? '10px' : 0,
  marginRight: orient === 'me' ? '10px' : 0,
  padding: 20,
}));

export const ChatMessage: React.FC<ChatMessageProps> = ({ data }) => {
  return (
    <ContainerStyled>
      {data.map((item, key) => (
        <Item key={key} orient={item.send}>
          {item.emotion && item.send === 'replay' && <>{item.emotion}</>}
          <BoxStyled orient={item.send}>
            <Typography
              variant="subtitle2"
              style={{
                marginBottom: '5px',
                font: 'normal normal 600 16px/20px Source Sans Pro',
              }}
            >
              {item.name}
            </Typography>
            <Typography
              variant="body1"
              style={{
                font: 'normal normal normal 16px/20px Source Sans Pro',
              }}
            >
              {item.message}
            </Typography>
            <Typography
              variant="caption"
              style={{
                position: 'absolute',
                bottom: '-18px',
                left: item.send === 'me' ? 0 : 'auto',
                right: item.send === 'me' ? 'auto' : 0,
                font: 'normal normal normal 11px/13px Source Sans Pro',
                opacity: 0.5,
                color: '#4D4F5C',
              }}
            >
              {item.time}
            </Typography>
          </BoxStyled>
          {item.emotion && item.send === 'me' && <>{item.emotion}</>}
          {item.emotionReplay && item.send === 'me' && <>{item.emotionReplay}</>}
        </Item>
      ))}
    </ContainerStyled>
  );
};