import { useCallback, useRef, useState } from 'react';
import { Dialog, useUIKit, Toast } from '@tencentcloud/uikit-base-component-react';
import { useUIContext, UserPicker } from 'tuikit-atomicx-react/chat';
import { useChatUIState } from '../../../context/useChatUIState';
import type { ForwardMessageOption, IUserPickerRef, IUserPickerRow, ConversationInfo } from 'tuikit-atomicx-react/chat';

interface ForwardProps {
  /** Whether the forward modal is open */
  open: boolean;
  /** Callback fired when the modal is closed */
  onClose: () => void;
  /** Additional class names for styling */
  className?: string | undefined;
}

function MessageForward(props: ForwardProps) {
  const {
    open,
    onClose,
    className,
  } = props;

  const { t } = useUIKit();

  const { conversationList, forwardMessages: forwardMessagesAPI } = useUIContext();
  const { forwardMessages, closeForwardModal, enableReadReceipt } = useChatUIState();

  const [isDisableConfirm, setIsDisableConfirm] = useState<boolean>(true);

  const currentConversationList: IUserPickerRow<undefined>[] = (conversationList ?? []).map((conversation: ConversationInfo) => {
    const userPickerRow: IUserPickerRow<undefined> = {
      key: conversation.conversationID,
      label: conversation.title || conversation.conversationID,
      avatarUrl: conversation.avatarURL || '',
    };
    return userPickerRow;
  });

  const userPickerRef = useRef<IUserPickerRef<undefined>>(null);

  const forward = useCallback(async () => {
    const selectedConversationList = userPickerRef.current?.getSelectedItems();

    if (!selectedConversationList || selectedConversationList.length === 0) {
      return;
    }

    const option: ForwardMessageOption = {
      forwardType: 'separate',
      sendMessageOption: {
        needReadReceipt: enableReadReceipt || false,
      },
    };
    const forwardPromises = selectedConversationList.map(
      item => forwardMessagesAPI(forwardMessages, option, item.key),
    );

    await Promise.allSettled(forwardPromises);
    closeForwardModal();
    onClose();
  }, [forwardMessages, forwardMessagesAPI, closeForwardModal, onClose, enableReadReceipt]);

  return (
    <Dialog
      visible={open}
      title={t('MessageList.forward_to')}
      onClose={onClose}
      className={className || ''}
      onCancel={onClose}
      onConfirm={forward}
      confirmDisabled={isDisableConfirm}
      style={{
        height: '80vh',
      }}
    >
      <UserPicker
        ref={userPickerRef}
        displayMode="list"
        dataSource={currentConversationList}
        maxCount={10}
        onMaxCountExceed={() => {
          Toast.error({
            message: t('MessageList.max_count_exceed'),
          });
        }}
        onSelectedChange={(selectedItems) => {
          setIsDisableConfirm(selectedItems.length === 0);
        }}
      />
    </Dialog>
  );
}

export { MessageForward };
export type { ForwardProps };