import type React from 'react';
import { useCallback } from 'react';
import { useChatContext } from 'tuikit-atomicx-react/chat';
import { useChatHeader } from '../../hooks';
import ChatHeaderUI from './ChatHeaderUI';
import type { AvatarProps } from 'tuikit-atomicx-react/chat';

interface ChatHeaderH5Props {
  /** Custom title, if not provided, will use conversation info */
  title?: string | undefined;
  /** Custom avatar image URL */
  avatar?: string | undefined;
  /** Whether to show call features */
  enableCall?: boolean | undefined;
  /** Whether to show user status */
  enableUserStatus?: boolean | undefined;
  /** Whether to enable chat setting */
  chatHeaderActions?: Array<'videoCall' | 'audioCall' | 'chatSetting' | 'search'> | undefined;
  /** Custom avatar component */
  Avatar?: React.ComponentType<AvatarProps> | undefined;
  /** Custom left slot */
  ChatHeaderLeft?: React.ReactNode | undefined;
  /** Custom right slot */
  ChatHeaderRight?: React.ReactNode | undefined;
  /** Additional class names */
  className?: string | undefined;
  /** Additional style */
  style?: React.CSSProperties | undefined;
  /** Custom mobile back action, defaults to clearing active conversation */
  onBack?: (() => void) | undefined;
  onSearchClick?: (() => void) | undefined;
}

const ChatHeaderH5 = (props: ChatHeaderH5Props) => {
  const {
    title,
    avatar,
    enableCall = false,
    enableUserStatus = false,
    chatHeaderActions,
    Avatar,
    className,
    style,
    ChatHeaderLeft,
    ChatHeaderRight,
    onBack,
  } = props;
  const { setActiveConversation } = useChatContext();

  const {
    conversation,
    isC2CFriend,
    isGroup,
    isOnline,
    title: exceptedTitle,
    avatar: exceptedAvatar,
  } = useChatHeader();

  const handleBack = useCallback(() => {
    if (onBack) {
      setActiveConversation(undefined);
      onBack?.();
    }
  }, [onBack, setActiveConversation]);

  return (
    <ChatHeaderUI
      isGroup={isGroup}
      title={title || exceptedTitle || ''}
      avatar={avatar || exceptedAvatar}
      conversation={conversation}
      isC2CFriend={isC2CFriend}
      isOnline={isOnline}
      enableCall={enableCall}
      enableUserStatus={enableUserStatus}
      chatHeaderActions={chatHeaderActions}
      Avatar={Avatar}
      style={style}
      className={className}
      onBack={handleBack}
      onSearchClick={props.onSearchClick}
      ChatHeaderLeft={ChatHeaderLeft}
      ChatHeaderRight={ChatHeaderRight}
    />
  );
};

export {
  ChatHeaderH5,
};

export type { ChatHeaderH5Props };