import { Box, Typography } from '@mui/material';
import { styled } from '@mui/material/styles';

export const ChatMessageBalloonContainerStyle: any = styled(Box)({
  display: 'flex',
  flexDirection: 'column',
});

export const ChatMessageBalloonRowStyle: any = styled('div')<{ direction: string }>`
  display: flex;
  margin-bottom: 8px;
  flex-direction: ${props => (props.direction === 'I' ? 'row-reverse' : 'row')};

  &:last-child {
    margin-bottom: 0px;
  }
`;

export const ChatMessageBalloonStyle: any = styled('div')<{ direction: string }>`
  background-color: ${props => (props.direction === 'I' ? props.theme.palette.background.paper : props.theme.palette.primary.main)};
  border: 2px solid transparent;
  border-radius: ${props => (props.direction === 'I' ? '20px 20px 0px 20px' : '20px 20px 20px 0px')};
  box-sizing: border-box;
  color: ${props => (props.direction === 'I' ? '#4D4F5B' : '#FFF')};
  display: flex;
  flex-direction: column;
  padding: 12px 24px;
  width: 60%;
  transition: border 0.6s cubic-bezier(0.16, 1, 0.3, 1);

  &.is-highlight {
    border: 2px solid ${props => props.theme.palette.info.light};
  }

  &.is-interactive {
    cursor: pointer;

    &:hover {
      border: 2px solid ${props => props.theme.palette.primary.light};
    }
  }
`;

export const ChatMessageDateStyle: any = styled(Typography)`
  color: ${props => props.theme.palette.text.secondary};
  opacity: 0.5;
`;

export const ChatMessageChildrenStyle: any = styled('div')<{ direction: string }>`
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex: 1;
  justify-content: ${props => (props.direction === 'I' ? 'end' : 'start')};
  padding: 8px;
`;