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

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

const ContainerStyled = styled(Box)(({ theme }) => ({
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  minWidth: '640px',
  backgroundColor: theme?.palette?.grey?.[100] || '#F0F0F0',
  padding: theme?.spacing?.(1.25) || '10px',
}));

const BoxStyled = styled(Box)<{
  orient?: string;
}>(({ theme, orient }) => ({
  width: '70%',
  backgroundColor: orient === 'replay'
    ? theme?.palette?.primary?.main || olosPalette.primary.main
    : theme?.palette?.background?.paper || '#FFF',
  color: orient === 'replay'
    ? theme?.palette?.primary?.contrastText || '#FFF'
    : theme?.palette?.text?.primary || '#4D4F5C',
  borderTopLeftRadius: 30,
  borderTopRightRadius: 30,
  borderBottomLeftRadius: orient === 'me' ? 2 : 30,
  borderBottomRightRadius: orient === 'me' ? 30 : 2,
  marginLeft: orient === 'replay' ? theme?.spacing?.(1.25) || '10px' : 0,
  marginRight: orient === 'me' ? theme?.spacing?.(1.25) || '10px' : 0,
  padding: theme?.spacing?.(2.5) || 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"
              sx={{
                marginBottom: '5px',
                fontWeight: 600,
                fontSize: '16px',
                lineHeight: '20px',
                fontFamily: theme => theme?.typography?.fontFamily || 'Source Sans Pro',
              }}
            >
              {item.name}
            </Typography>
            <Typography
              variant="body1"
              sx={{
                fontSize: '16px',
                lineHeight: '20px',
                fontFamily: theme => theme?.typography?.fontFamily || 'Source Sans Pro',
              }}
            >
              {item.message}
            </Typography>
            <Typography
              variant="caption"
              sx={{
                position: 'absolute',
                bottom: '-18px',
                left: item.send === 'me' ? 0 : 'auto',
                right: item.send === 'me' ? 'auto' : 0,
                fontSize: '11px',
                lineHeight: '13px',
                fontFamily: theme => theme?.typography?.fontFamily || 'Source Sans Pro',
                opacity: 0.5,
                color: theme => theme?.palette?.text?.secondary || '#4D4F5C',
              }}
            >
              {item.time}
            </Typography>
          </BoxStyled>
          {item.emotion && item.send === 'me' && <>{item.emotion}</>}
          {item.emotionReplay && item.send === 'me' && <>{item.emotionReplay}</>}
        </Item>
      ))}
    </ContainerStyled>
  );
};