import { FC } from 'react';

import Box, { BoxProps } from '@material-hu/mui/Box';
import ButtonBase from '@material-hu/mui/ButtonBase';
import { grey, green } from '@material-hu/mui/colors';
import { styled } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import { useAuth } from 'src/contexts/JWTContext';
import useScrollToMessage from 'src/hooks/useScrollToMessage';
import { Message, MessageStatus } from 'src/types/chats';
import { cn } from 'src/utils/styles';

import ChatDescriptionAction from 'src/components/dashboard/chat/ChatThread/ChatDescriptionAction';
import { useTranslation } from 'src/components/dashboard/chat/i18n';
import ReduceMessage from 'src/components/dashboard/chat/ReduceMessage';

type StyleProps = {
  userColor?: string;
};

const RepliedBubble = styled(Box, {
  shouldForwardProp: prop => prop !== 'userColor',
})<StyleProps>(({ theme, userColor }) => ({
  backgroundColor: theme.palette.background.default,
  borderRadius: 10,
  padding: '4px 8px',
  marginBottom: theme.spacing(1),
  borderLeftWidth: 4,
  borderLeftStyle: 'solid',
  borderLeftColor: userColor || grey[700],
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'flex-start',
  width: '100%',
  '& .name': {
    color: userColor || grey[700],
  },
  '& .message': {
    display: 'flex',
    flexDirection: 'row',
    maxHeight: '4.3em',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    WebkitLineClamp: 3,
    WebkitBoxOrient: 'vertical',
  },
  '&.loggedUser': {
    borderLeftColor: userColor || green[400],
    '& .name': {
      color: userColor || green[800],
    },
  },
}));

export type MessageRepliedProps = BoxProps & {
  message: Message;
  withScroll?: boolean;
};

export const MessageReplied: FC<MessageRepliedProps> = props => {
  const { message, withScroll = false, className, ...boxProps } = props;

  if (!message) return null;

  const { user, userId, status } = message;

  const { user: loggedUser } = useAuth();
  const { t } = useTranslation();
  const { setScrollTo } = useScrollToMessage();

  const isLoggedUser = userId === loggedUser.id;

  const handleClick = () => {
    setScrollTo(message);
  };

  return (
    <RepliedBubble
      className={cn([className, isLoggedUser ? 'loggedUser' : 'otherUser'])}
      userColor={user?.color}
      {...boxProps}
      component={withScroll ? ButtonBase : undefined}
      onClick={withScroll ? handleClick : undefined}
    >
      <Typography
        className="name"
        sx={{ marginBottom: '4px !important', fontWeight: 600 }}
      >
        {isLoggedUser ? t('ME') : user?.fullName}
      </Typography>
      <Typography
        color="inherit"
        variant="body2"
        className="message"
        sx={{ marginBottom: '0px !important' }}
      >
        {status === MessageStatus.DELETED && (
          <ChatDescriptionAction status={status} />
        )}
        {status !== MessageStatus.DELETED && (
          <ReduceMessage message={message} />
        )}
      </Typography>
    </RepliedBubble>
  );
};

export default MessageReplied;