import type React from 'react';
import { useUIKit } from '@tencentcloud/uikit-base-component-react';
import cs from 'classnames';
import { View, Avatar as DefaultAvatar, DEFAULT_GROUP_COMMON_AVATAR } from 'tuikit-atomicx-react/chat';
import { AudioCallPicker } from '../AudioCallPicker';
import { VideoCallPicker } from '../VideoCallPicker';
import classes from './ChatHeaderUI.module.scss';
import type { ConversationInfo } from 'tuikit-atomicx-react/chat';

interface ChatHeaderUIProps {
  /** Custom title */
  title: string;
  /** Whether it's a group conversation */
  isGroup: boolean;
  /** Custom avatar image URL */
  /** Whether the C2C peer is a friend */
  isC2CFriend?: boolean;
  /** Whether the C2C friend is online */
  isOnline?: boolean;
  /** Custom avatar image URL */
  avatar?: string;
  /** Whether to show call features */
  enableCall?: boolean | undefined;
  /** Whether to show user status */
  enableUserStatus?: boolean | undefined;
  /** IM conversation info */
  conversation?: ConversationInfo | undefined;
  /** Chat header action buttons */
  chatHeaderActions?: Array<'videoCall' | 'audioCall' | 'chatSetting' | 'search'> | undefined;
  /** Custom avatar component */
  Avatar?: React.ComponentType<any> | 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;
  /** Search click callback */
  onSearchClick?: (() => void) | undefined;
}

const ChatHeaderUI = (props: ChatHeaderUIProps) => {
  const {
    title,
    avatar,
    enableCall = false,
    enableUserStatus = false,
    isC2CFriend = false,
    isOnline = false,
    Avatar,
    className,
    style,
    ChatHeaderLeft = null,
    ChatHeaderRight = null,
  } = props;

  const { direction } = useUIKit();
  const avatarUrl = props.isGroup ? avatar || DEFAULT_GROUP_COMMON_AVATAR : avatar || '';

  return (
    <View
      className={cs(classes['chat-header'], className)}
      style={style}
      dir={direction}
    >
      <View className={classes['chat-header__container']}>
        <View className={classes['chat-header__left']}>
          {ChatHeaderLeft}
          {
            Avatar
              ? (
                <Avatar src={avatarUrl} alt={title} />
              )
              : (
                <DefaultAvatar
                  src={avatarUrl}
                  alt={title}
                  isShowOnlineStatus={enableUserStatus && isC2CFriend}
                  isOnline={isOnline}
                />
              )
          }
          <View className={classes['chat-header__info']}>
            <View className={classes['chat-header__title']}>
              {title}
            </View>
          </View>
        </View>
        {enableCall && (
          <View className={classes['chat-header__call']} flexDir="row" gap={8}>
            <AudioCallPicker />
            <VideoCallPicker />
          </View>
        )}
        {ChatHeaderRight}
      </View>
    </View>
  );
};

export default ChatHeaderUI;