import { type FC, type SyntheticEvent } from 'react';

import { IconArrowRight, IconPinnedOff } from '@material-hu/icons/tabler';
import Divider from '@material-hu/mui/Divider';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';

import HuDialog from '@material-hu/components/design-system/Dialog';

import { useUpdatePinnedMessages } from 'src/pages/dashboard/Conversations/hooks/useConversationsQueries';
import { type ConversationMessage } from 'src/pages/dashboard/Conversations/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

import AttachmentDescription from '../../../shared/AttachmentDescription';
import AttachmentThumbnail from '../../../shared/AttachmentThumbnail';
import TypographyTagAndLinkSensitive from '../../ConversationMessage/TypographyTagAndLinkSensitive';

type PinnedMessagesModalProps = {
  onClose: () => void;
  pinnedMessages: ConversationMessage[];
  scrollToMessage: (message: ConversationMessage) => void;
};

const PinnedMessagesModal: FC<PinnedMessagesModalProps> = ({
  onClose,
  pinnedMessages,
  scrollToMessage,
}) => {
  const { t } = useLokaliseTranslation('chat');
  const updatePinnedMessages = useUpdatePinnedMessages();

  const handleUnpin = (e: SyntheticEvent, message: ConversationMessage) => {
    e.stopPropagation();
    updatePinnedMessages.mutate({
      channel: message.channel,
      messageTs: message.hu_data.message_ts,
    });
    onClose();
  };

  const handleGoToMessage = (
    e: SyntheticEvent,
    message: ConversationMessage,
  ) => {
    e.stopPropagation();
    scrollToMessage(message);
    onClose();
  };

  return (
    <HuDialog
      title={t('pin.pinned_messages')}
      onClose={onClose}
      body={
        <Stack sx={{ gap: 0 }}>
          {pinnedMessages.map((message, index) => {
            const attachments = message.attachments || [];
            return (
              <Stack key={message.hu_data.message_ts}>
                <Stack
                  sx={{
                    flexDirection: 'row',
                    alignItems: 'center',
                    justifyContent: 'space-between',
                    py: 1.5,
                    gap: 1,
                  }}
                >
                  {attachments.length > 0 && (
                    <>
                      <AttachmentDescription
                        attachments={attachments}
                        text={message.text}
                        highlightedSpans={message.hu_data.highlighted_spans}
                        isPinned
                      />
                      {attachments.length === 1 && (
                        <AttachmentThumbnail
                          attachment={attachments[0]}
                          width={40}
                          height={40}
                        />
                      )}
                    </>
                  )}
                  {!attachments.length && (
                    <TypographyTagAndLinkSensitive
                      disableLink
                      noWrap
                      highlightedSpans={message.hu_data.highlighted_spans}
                    >
                      {message.text}
                    </TypographyTagAndLinkSensitive>
                  )}
                  <Stack
                    sx={{
                      flexDirection: 'row',
                    }}
                  >
                    <IconButton
                      onClick={(e: SyntheticEvent) => handleUnpin(e, message)}
                    >
                      <IconPinnedOff />
                    </IconButton>
                    <IconButton
                      onClick={(e: SyntheticEvent) =>
                        handleGoToMessage(e, message)
                      }
                    >
                      <IconArrowRight />
                    </IconButton>
                  </Stack>
                </Stack>
                {index < pinnedMessages.length - 1 && <Divider />}
              </Stack>
            );
          })}
        </Stack>
      }
    />
  );
};

export default PinnedMessagesModal;