import { type FC } from 'react';

import Box, { type BoxProps } from '@material-hu/mui/Box';
import { styled } from '@material-hu/mui/styles';

import { ReplyMessageProvider } from 'src/contexts/ReplyMessageContext';
import { ScrollToMessageProvider } from 'src/contexts/ScrollToMessageContext';

const Container = styled(Box)(({ theme }) => ({
  backgroundColor: theme.palette.background.default,
  display: 'flex',
  flexDirection: 'column',
  flexGrow: 1,
  height: '100%',
  '& .messagesContainer': {
    position: 'relative',
    flexGrow: 1,
    overflow: 'auto',
    '& .message': {
      display: 'flex',
      marginBottom: theme.spacing(2),
      maxWidth: 500,
      '&.loggedUser': {
        flexDirection: 'row-reverse',
        marginLeft: 'auto',
        '& .avatar': {
          '& .MuiAvatar-root': {
            marginLeft: theme.spacing(2),
            marginRight: theme.spacing(0),
          },
        },
        '& .bubble': {
          backgroundColor:
            theme.palette.mode === 'light'
              ? '#DAFFD0' // No DS token for chat bubble green — keeping original light mode color
              : theme.palette.new.action.background.brand.default,
        },
      },
      '&.otherUser': {
        flexDirection: 'row',
        marginLeft: 0,
        '& .avatar': {
          '& .MuiAvatar-root': {
            marginLeft: theme.spacing(0),
            marginRight: theme.spacing(2),
          },
        },
      },
      '&.edit': {
        maxWidth: 800,
        '& .bubble': {
          width: '400px',
          marginRight: theme.spacing(7),
        },
      },
      '&.button': {
        '& .bubble': {
          padding: 0,
          marginBottom: theme.spacing(2),
          '& .info': {
            position: 'absolute',
            right: 0,
          },
          backgroundColor: 'transparent !important',
          boxShadow: theme.shadows[0],
        },
      },
      '& .bubble': {
        position: 'relative',
        backgroundColor: theme.palette.background.paper,
        borderRadius: '8px',
        boxShadow: theme.shadows[1],
        padding: '3px',
        '&.reply': {
          padding: theme.spacing(1),
        },
        '& .body': {
          whiteSpace: 'pre-wrap',
        },
        '& .name': {
          marginBottom: theme.spacing(1),
          fontSize: 'small',
          textOverflow: 'ellipsis',
          whiteSpace: 'nowrap',
          overflow: 'hidden',
          display: 'block',
          '& a': {
            fontSize: 'small',
            textOverflow: 'ellipsis',
            whiteSpace: 'nowrap',
            overflow: 'hidden',
            display: 'block',
            marginLeft: '0px !important',
          },
        },
        '& .info': {
          display: 'flex',
          justifyContent: 'flex-end',
          alignItems: 'center',
          marginTop: theme.spacing(0.5),
        },
      },
    },
  },
  '& .typingLogo': {
    height: 50,
    width: 50,
    marginLeft: 4,
    marginTop: -4,
    zIndex: 1,
  },
  '& .toolbar': {
    display: 'flex',
    flexShrink: 0,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    backgroundColor: theme.palette.background.paper,
    borderBottom: `1px solid ${theme.palette.divider}`,
    minHeight: 64,
    padding: theme.spacing(1, 2),
    '& .MuiButtonBase-root': {
      display: 'flex',
      flex: 1,
      alignItems: 'center',
      justifyContent: 'flex-start',
      padding: '3px 9px',
      '& .avatar': {
        height: 30,
        width: 30,
      },
      '& .name': {
        marginLeft: theme.spacing(2),
      },
    },
  },
  '& .footer': {
    position: 'relative',
    '& .send-message': {
      opacity: 1,
      transition: 'opacity 0.3s, transform 0.3s',
    },
    '& .hide-send-message': {
      opacity: 0,
      pointerEvents: 'none',
      transform: 'translateX(-5%)',
    },
    '& .send-record-audio': {
      opacity: 0,
      pointerEvents: 'none',
      transition: 'opacity 1s',
      position: 'absolute',
      top: '15px',
      right: '15px',
    },
    '& .show-send-record-audio': {
      opacity: 1,
      pointerEvents: 'auto',
    },
    backgroundColor: theme.palette.background.paper,
    '& .messageAdd': {
      flexDirection: 'column',
      display: 'flex',
      flexShrink: 0,
      padding: theme.spacing(1),
      '& .form': {
        display: 'flex',
        flexDirection: 'row',
        flex: 1,
        width: '100%',
        alignItems: 'flex-end',
      },
      '& .reply': {
        width: '100%',
        display: 'flex',
        flexDirection: 'row',
        '& .show': {
          transform: 'translateY(0)',
          opacity: 1,
        },
        '& .cancelReply': {
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
        },
        '& .messageToReply': {
          flex: 1,
          '& .name': {
            marginBottom: theme.spacing(1),
            fontSize: 'small',
            textOverflow: 'ellipsis',
            overflow: 'hidden',
            display: 'block',
          },
        },
      },
    },
  },
}));

export type ChatThreadContainerProps = BoxProps & {
  inViewMessagesEnd?: boolean;
};

export const ChatThreadContainer: FC<
  React.PropsWithChildren<ChatThreadContainerProps>
> = props => {
  const { children, inViewMessagesEnd, ...boxProps } = props;

  return (
    <ScrollToMessageProvider>
      <ReplyMessageProvider inViewMessagesEnd={inViewMessagesEnd}>
        <Container
          sx={{ position: 'relative' }}
          {...boxProps}
        >
          {children}
        </Container>
      </ReplyMessageProvider>
    </ScrollToMessageProvider>
  );
};

export default ChatThreadContainer;