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 { type SxProps, useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

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

import AttachmentDescription from 'src/pages/dashboard/Conversations/components/shared/AttachmentDescription';
import AttachmentThumbnail from 'src/pages/dashboard/Conversations/components/shared/AttachmentThumbnail';
import {
  type HighlightedSpan,
  type SendFilesList,
} from 'src/pages/dashboard/Conversations/types';

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

type MessageRepliedAttachmentsProps = {
  userName: string;
  files: SendFilesList;
  sxContainer: SxProps;
  withDelete?: boolean;
  text?: string;
  onClick?: () => void;
  highlightedSpans?: HighlightedSpan[];
};

type DeleteButtonsProps = {
  onDelete: () => void;
};

const DeleteButton: FC<DeleteButtonsProps> = props => {
  const { onDelete } = props;
  const theme = useTheme();
  return (
    <IconButton onClick={onDelete}>
      <IconX color={theme.palette.new.text.neutral.default} />
    </IconButton>
  );
};

const MessageRepliedAttachments: FC<MessageRepliedAttachmentsProps> = props => {
  const {
    files,
    sxContainer,
    withDelete = false,
    userName,
    onClick,
    text,
    highlightedSpans = [],
  } = props;
  const { clearReply } = useReplayMessageSetter();

  const attachment = files[0];
  const attachmentsCount = files.length;

  return (
    <Stack
      sx={{
        flexDirection: 'row',
        alignItems: 'center',
        mb: withDelete ? 1 : 0,
        gap: withDelete ? 1 : 0,
      }}
    >
      <HuCardContainer
        onClick={onClick}
        sx={{
          width: '100%',
          borderRadius: 1,
          border: 0,
          '& .MuiCardContent-root': {
            padding: 0,
          },
          ...sxContainer,
        }}
      >
        <Stack
          sx={{
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between',
            gap: 5,
            minWidth: 0,
          }}
        >
          <Stack
            sx={{
              px: 2,
              py: 1,
              gap: 0.3,
              flex: 1,
              minWidth: 0,
            }}
          >
            <Typography
              variant={withDelete ? 'globalS' : 'globalXXS'}
              fontWeight="fontWeightSemiBold"
            >
              {userName}
            </Typography>
            <Stack
              sx={{
                flexDirection: 'row',
                alignItems: 'center',
                gap: 0.3,
              }}
            >
              <AttachmentDescription
                attachments={files}
                text={text}
                highlightedSpans={highlightedSpans}
                variant={withDelete ? 'globalS' : 'globalXXS'}
              />
            </Stack>
          </Stack>
          {attachmentsCount === 1 && (
            <AttachmentThumbnail
              attachment={attachment}
              width={50}
              height={64}
            />
          )}
        </Stack>
      </HuCardContainer>
      {withDelete && <DeleteButton onDelete={() => clearReply()} />}
    </Stack>
  );
};

export default MessageRepliedAttachments;