// ConversationActions.tsx
import type React from 'react';
import { Fragment, useCallback, useLayoutEffect, useMemo, useState } from 'react';
import { ConversationMarkType, ReceiveMessageOption } from 'tuikit-atomicx-react/chat';
import { useUIKit } from '@tencentcloud/uikit-base-component-react';
import cs from 'classnames';
import { useChatContext } from 'tuikit-atomicx-react/chat';
import { ContextMenu, Dialog } from '../../../baseComp';
import styles from './ConversationActions.module.scss';
import type {
  ConversationActionItem,
  ConversationActionsProps,
} from '../../../types/conversation';
import type { ConversationInfo } from 'tuikit-atomicx-react/chat';

export const ConversationActions = (props: ConversationActionsProps) => {
  const {
    conversation,
    enablePin,
    enableMute,
    enableDelete,
    enableMarkUnread,
    onMarkConversationUnread,
    onConversationPin,
    onConversationMute,
    onConversationDelete,
    customConversationActions,
    PopupElements,
    onClick,
    className,
    style,
    onClose,
    children,
  } = props;

  const { t, direction } = useUIKit();
  const [markUnreadStatus, setMarkUnreadStatus] = useState<boolean>(true);

  const {
    pinConversation,
    setReceiveMessageOpt,
    deleteConversation,
    markConversation,
    clearConversationUnreadCount,
    setActiveConversation,
  } = useChatContext();

  const isMuted = conversation.receiveOption !== ReceiveMessageOption.Receive;

  const openMarkConversationErrorDialog = useCallback(() => {
    Dialog.open({
      title: t('ConversationList.tip'),
      content: (
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            gap: '12px',
            alignItems: 'flex-start',
            textAlign: 'left',
            lineHeight: 1.6,
          }}
        >
          <div>{t('ConversationList.mark_conversation_error_3122_content')}</div>
          <a
            href="https://cloud.tencent.com/document/product/269/81908#FUNCDetail"
            target="_blank"
            rel="noreferrer"
            style={{ color: 'var(--text-color-link, #0052d9)', textDecoration: 'none' }}
          >
            {t('ConversationList.view_details')}
          </a>
          <a
            href="https://cloud.tencent.com/document/product/269/123343"
            target="_blank"
            rel="noreferrer"
            style={{ fontSize: '12px', color: 'var(--text-color-secondary, #6b7280)', textDecoration: 'none' }}
          >
            {t('ConversationList.how_to_remove_conversation_mark_feature')}
          </a>
        </div>
      ),
    });
  }, [t]);

  useLayoutEffect(() => {
    if (conversation.unreadCount > 0) {
      setMarkUnreadStatus(true);
    } else {
      const unreadStatus = conversation.conversationMarkList?.includes(ConversationMarkType.Unread);
      setMarkUnreadStatus(unreadStatus);
    }
  }, [conversation]);

  const markConversationUnread = useCallback(async (targetConversation: ConversationInfo, isUnread: boolean) => {
    const hasUnreadCount = targetConversation.unreadCount > 0;

    if (hasUnreadCount && !isUnread) {
      clearConversationUnreadCount(targetConversation.conversationID);
      markConversation([targetConversation.conversationID], ConversationMarkType.Unread, false).catch((err) => {
        if (err.code === 3122) {
          openMarkConversationErrorDialog();
        }
      });
    } else {
      await markConversation([targetConversation.conversationID], ConversationMarkType.Unread, isUnread).catch((err) => {
        if (err.code === 3122) {
          openMarkConversationErrorDialog();
        }
      });
    }
  }, [clearConversationUnreadCount, markConversation, openMarkConversationErrorDialog]);

  const conversationActions = useMemo<Record<string, ConversationActionItem>>(() => ({
    pin: {
      enable: !!enablePin,
      label: t(conversation.isPinned ? 'TUIConversation.Unpin' : 'TUIConversation.Pin'),
      onClick: (_conversation: ConversationInfo) => {
        pinConversation(_conversation.conversationID, !_conversation.isPinned);
        onConversationPin?.(_conversation);
      },
    },
    mute: {
      enable: !!enableMute,
      label: t(isMuted ? 'TUIConversation.Unmute' : 'TUIConversation.Mute'),
      onClick: (_conversation: ConversationInfo) => {
        setReceiveMessageOpt(
          _conversation.conversationID,
          isMuted ? ReceiveMessageOption.Receive : ReceiveMessageOption.NotNotify,
        );
        onConversationMute?.(_conversation);
      },
    },
    markUnread: {
      enable: !!enableMarkUnread,
      label: markUnreadStatus ? t('TUIConversation.MarkRead') : t('TUIConversation.MarkUnRead'),
      onClick: (_conversation: ConversationInfo) => {
        markConversationUnread(_conversation, !markUnreadStatus);
        onMarkConversationUnread?.(_conversation);
      },
    },
    delete: {
      enable: !!enableDelete,
      label: t('TUIConversation.Delete'),
      onClick: (_conversation: ConversationInfo) => {
        deleteConversation(_conversation.conversationID).then(() => {
          setActiveConversation(undefined);
        });
        onConversationDelete?.(_conversation);
      },
    },
    ...customConversationActions,
  }), [
    enablePin,
    enableMute,
    enableDelete,
    enableMarkUnread,
    t,
    conversation.isPinned,
    isMuted,
    markUnreadStatus,
    onConversationPin,
    onConversationMute,
    onMarkConversationUnread,
    onConversationDelete,
    pinConversation,
    setReceiveMessageOpt,
    deleteConversation,
    markConversationUnread,
    customConversationActions,
    setActiveConversation,
  ]);

  const onClickMenuItem = (e: React.MouseEvent<HTMLElement>, key: string) => {
    onClick?.(e, key, conversation);
    conversationActions[key]?.onClick(conversation, e);
    onClose?.();
  };
  const enabledActionKeys = Object.keys(conversationActions).filter(
    key => conversationActions[key].enable !== false,
  );

  return (
    <ContextMenu.Root>
      <ContextMenu.Trigger asChild>
        {children || (
          <div className={cs(styles.conversationActions, className)} style={style} />
        )}
      </ContextMenu.Trigger>
      <ContextMenu.Portal>
        <ContextMenu.Positioner align={direction === 'ltr' ? 'start' : 'end'}>
          <ContextMenu.Popup className={styles.conversationActions__container} dir={direction}>
            {PopupElements}
            {enabledActionKeys.map((key: string) => {
              const shouldSeparateDangerAction = false;
              return (
                <Fragment key={key}>
                  {shouldSeparateDangerAction && (
                    <ContextMenu.Separator className={styles.conversationActions__separator} />
                  )}
                  <ContextMenu.Item
                    destructive={key === 'delete'}
                    className={cs(
                      styles.conversationActions__item,
                      {
                        [styles['conversationActions__item--delete']]: key === 'delete',
                      },
                    )}
                    onClick={e => onClickMenuItem(e, key)}
                  >
                    {conversationActions[key].label}
                  </ContextMenu.Item>
                </Fragment>
              );
            })}
          </ContextMenu.Popup>
        </ContextMenu.Positioner>
      </ContextMenu.Portal>
    </ContextMenu.Root>
  );
};

export default ConversationActions;