import { type FC } from 'react';

import { IconX } from '@material-hu/icons/tabler';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import HuCardContainer from '@material-hu/components/design-system/CardContainer';

import MessageToReplyAttachments from 'src/pages/dashboard/Conversations/components/ConversationsThread/ConversationMessage/MessageRepliedAttachments';
import { type ConversationMessage } from 'src/pages/dashboard/Conversations/types';

import { useReplayMessageSetter } from '../../../contexts/ReplayMessageConversationContext';
import TypographyTagAndLinkSensitive from '../ConversationMessage/TypographyTagAndLinkSensitive';

type ShowMessageToReplayProps = {
  messageToReply: ConversationMessage;
};

const ShowMessageToReplay: FC<ShowMessageToReplayProps> = props => {
  const { messageToReply } = props;
  const theme = useTheme();
  const { clearReply } = useReplayMessageSetter();

  const hasAttachmentes = !!messageToReply?.attachments?.length;

  if (hasAttachmentes) {
    return (
      <MessageToReplyAttachments
        userName={messageToReply.username}
        text={messageToReply.text}
        sxContainer={{
          backgroundColor: theme.palette.new.background.layout.default,
          '& .MuiCardContent-root': {
            p: 0,
          },
        }}
        files={messageToReply?.attachments ?? []}
        withDelete
      />
    );
  }
  return (
    <Stack
      sx={{
        flexDirection: 'row',
        alignItems: 'center',
        mb: 2,
        gap: 1,
      }}
    >
      <HuCardContainer
        sx={{
          width: '100%',
          backgroundColor: theme.palette.new.background.layout.default,
          '& .MuiCardContent-root': {
            p: 1,
          },
        }}
      >
        <Stack>
          <Typography
            variant="globalS"
            fontWeight="fontWeightSemiBold"
          >
            {messageToReply.username}
          </Typography>

          {messageToReply.text && (
            <TypographyTagAndLinkSensitive
              variant="globalS"
              disableLink
              sx={{
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
              }}
              highlightedSpans={messageToReply?.hu_data?.highlighted_spans}
            >
              {messageToReply.text}
            </TypographyTagAndLinkSensitive>
          )}
        </Stack>
      </HuCardContainer>
      <IconButton onClick={() => clearReply()}>
        <IconX color={theme.palette.new.text.neutral.default} />
      </IconButton>
    </Stack>
  );
};

export default ShowMessageToReplay;