import type React from 'react';
import type { CSSProperties } from 'react';
import type { ConversationInfo, ContactInfo, GroupCreateParams } from 'tuikit-atomicx-react/chat';
import type { AvatarProps } from '../components/Avatar';

export interface ConversationListProps {
  /** Determines whether the conversation search input appears on the conversation list view. */
  enableSearch?: boolean | undefined;
  /** Determines whether the conversation creation button appears on the conversation list view.  */
  enableCreate?: boolean | undefined;
  /** Determines whether the conversation action button appears on the conversation list view. */
  enableActions?: boolean | undefined;
  /** Specifies the prop to customize action on the conversation list item. */
  actionsConfig?: ConversationActionsConfig | undefined;
  /** Specifies a react component to customize the header of the conversation list. */
  Header?: React.ComponentType<ConversationListHeaderProps> | undefined;
  /** Specifies a react component to customize the conversation list component. */
  List?: React.ComponentType<ConversationListContentProps> | undefined;
  /** Specifies a react component to customize the conversation preview. */
  Preview?: React.ComponentType<ConversationPreviewUIProps> | undefined;
  /** Specifies a react component to customize the conversation create component. */
  ConversationCreate?: React.ComponentType<ConversationCreateProps> | undefined;
  /** Specifies a react component to customize the conversation search. */
  ConversationSearch?: React.ComponentType | undefined;
  /** When true, GROUP search results are filtered to only show groups the current user has joined. */
  enableLocalSearch?: boolean | undefined;
  /** Specifies a react component to customize the conversation actions in conversation preview. */
  ConversationActions?: React.ComponentType<ConversationActionsProps> | undefined;
  /** Specifies a react component to customize the placeholder when list is empty. */
  PlaceholderEmptyList?: React.ReactNode | undefined;
  /** Specifies a react component to customize the placeholder when list is loading. */
  PlaceholderLoading?: React.ReactNode | undefined;
  /** Specifies a react component to customize the placeholder when list loaded error. */
  PlaceholderLoadError?: React.ReactNode | undefined;
  /** Specifies a react component to customize the avatar in list. */
  Avatar?: React.ComponentType<AvatarProps> | undefined;
  /** Specifies a function to filter conversations in the conversation list. */
  filter?: ((conversationList: ConversationInfo[]) => ConversationInfo[]) | undefined;
  /** Specifies a function to sort conversations in the conversation list. */
  sort?: ((conversationList: ConversationInfo[]) => ConversationInfo[]) | undefined;
  /** Specifies the prop to receive callback when a user clicks a conversation. */
  onSelectConversation?: ((conversation: ConversationInfo) => void) | undefined;
  /** Specifies the prop to execute custom operations before creating a channel. */
  onBeforeCreateConversation?:
  (
    (
      params: string | GroupCreateParams
    ) => string | GroupCreateParams
  ) | undefined;
  /** Specifies the prop to receive callback when a conversation is created. */
  onConversationCreated?: ((conversation: ConversationInfo) => void) | undefined;
  /** The custom class name */
  className?: string | undefined;
  /** The custom css style */
  style?: React.CSSProperties | undefined;
}

export interface ConversationListHeaderProps {
  /** The main of the conversation list header */
  children: React.ReactNode;
  /** A custom component to display in the left area of header */
  left?: React.ReactNode;
  /** A custom component to display in the right area of header */
  right?: React.ReactNode;
  /** The custom class name */
  className?: string | undefined;
  /** The custom css style */
  style?: React.CSSProperties;
}

export interface ConversationListContentProps {
  /** Renders a customized component in the conversation list main. */
  children: React.ReactNode;
  /** Indicates whether the chat list is empty */
  empty?: boolean;
  /** Indicates whether the chat list is currently loading */
  loading?: boolean;
  /** Indicates whether there was an error loading the chat list */
  error?: boolean;
  /** A custom component to display when the chat list is empty */
  PlaceholderEmptyList?: React.ReactNode;
  /** A custom component to display while the chat list is loading */
  PlaceholderLoading?: React.ReactNode;
  /** A custom component to display when there is an error loading the chat list */
  PlaceholderLoadError?: React.ReactNode;
  /** The custom class name */
  className?: string | undefined;
  /** The custom css style */
  style?: React.CSSProperties;
}

export interface ConversationPreviewUIProps {
  /** The conversation to be displayed */
  conversation: ConversationInfo;
  /** If the component's Conversation is the active (selected) Conversation */
  isSelected?: boolean | undefined;
  /** Whether to show the ConversationActions */
  enableActions?: boolean | undefined;
  /** The string to be highlighted in the title */
  highlightMatchString?: string | undefined;
  /** The custom Avatar component */
  Avatar?: React.ComponentType<AvatarProps> | undefined;
  /** The custom Title component */
  Title?: string | JSX.Element | undefined;
  /** The custom last message abstract component */
  LastMessageAbstract?: string | JSX.Element | undefined;
  /** The custom last message abstract component */
  LastMessageTimestamp?: string | JSX.Element | undefined;
  /** The custom Unread component */
  Unread?: string | JSX.Element | undefined;
  /** The custom ConversationActions component */
  ConversationActions?: React.ComponentType<ConversationActionsProps> | undefined;
  /** Callback when the user click a conversation from conversation list */
  onSelectConversation?: ((conversation: ConversationInfo) => void) | undefined;
  /** The custom ConversationActions config */
  actionsConfig?: ConversationActionsConfig | undefined;
  /** The custom class name */
  className?: string | undefined;
  /** The custom class style */
  style?: CSSProperties | undefined;
  /** The custom children node to override UI */
  children?: React.ReactNode | undefined;
}

export interface ConversationPreviewProps extends ConversationPreviewUIProps {
  /** The custom Preview UI component */
  Preview?: React.ComponentType<ConversationPreviewUIProps>;
}

export interface ConversationActionItem {
  /** Determines whether the custom action is enabled. (Default: True)  */
  enable?: boolean;
  /** label: The label of the custom action. */
  label: string;
  /** onClick: The function to be called when the custom action is clicked. */
  onClick: (conversation: ConversationInfo, e?: React.MouseEvent) => void;
}

export interface ConversationActionsBaseConfig {
  /** Determines whether the pin button appears on the conversation actions list view.  */
  enablePin?: boolean;
  /**  Determines whether the mute button appears on the conversation actions list view.  */
  enableMute?: boolean;
  /** Determines whether the delete button appears on the conversation actions list view.  */
  enableDelete?: boolean;
  /** Determines whether the mark unread button appears on the conversation actions list view.  */
  enableMarkUnread?: boolean;
}

export interface ConversationActionsConfig extends ConversationActionsBaseConfig {
  /** Function to override the default behavior when user mark a conversation as unread. */
  onMarkConversationUnread?: (conversation: ConversationInfo, e?: React.MouseEvent) => void;
  /** Function to override the default behavior when user pin or unpin a conversation.  */
  onConversationPin?: (conversation: ConversationInfo, e?: React.MouseEvent) => void;
  /** Function to override the default behavior when user mute or unmute a conversation. */
  onConversationMute?: (conversation: ConversationInfo, e?: React.MouseEvent) => void;
  /** Function to override the default behavior when user delete a conversation. */
  onConversationDelete?: (conversation: ConversationInfo, e?: React.MouseEvent) => void;
  /**
   * An object containing custom conversation actions (key) and object (value).
   * Each value is an object with the following properties:
   * enable: Determines whether the custom action is enabled. (Default: True)
   * label: The label of the custom action.
   * onClick: The function to be called when the custom action is clicked.
   * Note: The key of the custom action must be unique.
   */
  customConversationActions?: Record<string, ConversationActionItem>;
  /** The icon react element to be displayed in the action popup. */
  PopupIcon?: React.ReactElement;
  /** An array of react elements to be displayed in the action popup. */
  PopupElements?: React.ReactElement[];
  /** The function to be called when the action popup is clicked. */
  onClick?: (e: React.MouseEvent, key?: string, conversation?: ConversationInfo) => void;
  /** Function to be called when the actions modal is closed (H5 only). */
  onClose?: () => void;
}

export interface ConversationActionsProps extends ConversationActionsConfig {
  /** The conversation model. */
  conversation: ConversationInfo;
  /** The trigger element for the context menu. */
  children?: React.ReactElement;
  /** The class name of the root element. */
  className?: string | undefined;
  /** The style of the root element. */
  style?: React.CSSProperties;
}

export interface ConversationCreateProps {
  visible?: boolean | undefined;
  className?: string | undefined;
  style?: React.CSSProperties | undefined;
  onBeforeCreateConversation?: ((
    params: string | GroupCreateParams
  ) => string | GroupCreateParams) | undefined;
  onConversationCreated?: ((conversation: ConversationInfo) => void) | undefined;
  onChangeCreateModelVisible?: ((visible: boolean) => void) | undefined;
  conversationList?: ConversationInfo[] | undefined;
}

export interface ConversationCreateButtonProps {
  visible?: boolean;
  onClick?: (event: React.BaseSyntheticEvent) => void;
  height?: number;
  width?: number;
  className?: string | undefined;
}

export enum PageStateTypes {
  USER_SELECT = 'Next',
  CREATE_DETAIL = 'Create',
  GROUP_TYPE = 'GroupType',
}

export interface ConversationCreateGroupDetailProps {
  profileList: ContactInfo[];
  pageState: PageStateTypes;
  setPageState: React.Dispatch<React.SetStateAction<PageStateTypes>>;
  onBeforeCreateConversation?: ((params: GroupCreateParams) => any) | undefined;
  onConversationCreated?: ((conversation: any) => void) | undefined;
}

export interface ConversationCreateSelectViewProps {
  selectList: ContactInfo[];
  setSelectList: React.Dispatch<React.SetStateAction<ContactInfo[]>>;
}

export interface ConversationCreateUsers {
  [key: string]: ContactInfo[];
}

export interface ConversationCreateUserSelectListProps extends ConversationCreateSelectViewProps {
  isCreateGroup: boolean;
  setIsCreateGroup: React.Dispatch<React.SetStateAction<boolean>>;
  conversationList?: ConversationInfo[];
  setPageState: React.Dispatch<React.SetStateAction<PageStateTypes>>;
  onBeforeCreateConversation?: ((params: any) => any) | undefined;
  onConversationCreated?: ((conversation: any) => void) | undefined;
  className?: string | undefined;
}