import { useEffect, useMemo, useState } from 'react';
import type { PropsWithChildren } from 'react';
import { useUIKit } from '@tencentcloud/uikit-base-component-react';
import cs from 'classnames';
import { ConversationMarkType, useChatContext, Avatar as DefaultAvatar } from 'tuikit-atomicx-react/chat';
import { getLocalConversationDraft } from '../../utils/conversationDraftStorage';
import { ConversationActions as DefaultConversationActions } from './ConversationActions';
import { ConversationCreate as DefaultConversationCreate } from './ConversationCreate';
import { ConversationListContent as DefaultConversationListContent } from './ConversationListContent';
import styles from './ConversationListH5.module.scss';
import { ConversationListHeader as DefaultConversationListHeader } from './ConversationListHeader';
import { ConversationPreview, ConversationPreviewUI as DefaultConversationPreviewUI } from './ConversationPreview';
import { ConversationSearch as DefaultConversationSearch } from './ConversationSearch';
import type { ConversationActionsConfig, ConversationActionsBaseConfig, ConversationListProps } from '../../types/conversation';
import type { ConversationInfo } from 'tuikit-atomicx-react/chat';

const DEFAULT_ACTIONS_CONFIG: ConversationActionsConfig = {
  enableDelete: true,
  enableMute: true,
  enableMarkUnread: true,
  enablePin: true,
};

function ConversationListComponent(props: ConversationListProps) {
  const {
    enableSearch: propEnableSearch,
    enableCreate: propEnableCreate,
    enableActions = true,
    actionsConfig: propActionsConfig,
    Header = DefaultConversationListHeader,
    List = DefaultConversationListContent,
    Preview = DefaultConversationPreviewUI,
    ConversationCreate = DefaultConversationCreate,
    ConversationSearch = DefaultConversationSearch,
    ConversationActions = DefaultConversationActions,
    PlaceholderEmptyList,
    PlaceholderLoading,
    PlaceholderLoadError,
    Avatar = DefaultAvatar,
    enableLocalSearch,
    onSelectConversation,
    onBeforeCreateConversation,
    onConversationCreated,
    className,
    style,
    filter,
    sort,
  } = props;

  const { searchConfig, conversationListConfig, direction, t } = useUIKit();
  const { enableCreateConversation, conversationActionList } = conversationListConfig;
  const enableSearch = (propEnableSearch ?? !searchConfig?.hideSearch) ?? true;
  const enableCreate = (propEnableCreate ?? enableCreateConversation) ?? true;

  const {
    conversationList,
    setActiveConversation,
    loadConversations,
    clearConversationUnreadCount,
    markConversation,
    setConversationDraft,
  } = useChatContext();

  useEffect(() => {
    loadConversations();
  }, [loadConversations]);

  useEffect(() => {
    conversationList.forEach((conversation) => {
      getLocalConversationDraft(conversation.conversationID).then((draft) => {
        if (draft && draft !== conversation.draft) {
          setConversationDraft(conversation.conversationID, draft).catch(() => {});
        }
      });
    });
  }, [conversationList, setConversationDraft]);

  const [isCreateModelShow, setIsCreateModelShow] = useState(false);

  const actionsConfig = useMemo<ConversationActionsConfig>(() => {
    if (propActionsConfig) {
      return {
        ...DEFAULT_ACTIONS_CONFIG,
        ...propActionsConfig,
      };
    }

    if (Array.isArray(conversationActionList)) {
      const config: ConversationActionsConfig = {};
      for (let i = 0; i < conversationActionList.length; i += 1) {
        const action = conversationActionList[i];
        const key = `enable${action?.replace(action[0], action[0].toUpperCase())}` as keyof ConversationActionsBaseConfig;
        config[`${key}`] = config[`${key}`] ?? true;
      }
      return config;
    }

    return DEFAULT_ACTIONS_CONFIG;
  }, [propActionsConfig, conversationActionList]);

  const renderConversationList = useMemo(() => {
    let _conversationList = conversationList ?? [];
    if (filter) {
      _conversationList = filter(_conversationList);
    }
    if (sort) {
      _conversationList = sort(_conversationList);
    }
    return _conversationList;
  }, [conversationList, filter, sort]);

  const handleSelectConversation = (conversation: ConversationInfo) => {
    clearConversationUnreadCount(conversation.conversationID).catch(() => {});
    if (conversation.conversationMarkList.includes(ConversationMarkType.Unread)) {
      markConversation([conversation.conversationID], ConversationMarkType.Unread, false).catch(() => {});
    }
    setActiveConversation(conversation.conversationID);
    onSelectConversation?.(conversation);
  };

  return (
    <div
      className={cs(className, styles.conversationList, styles['conversationList--mobile'])}
      style={style}
      dir={direction}
    >
      <Header
        left={!enableSearch ? <div className={styles.conversationList__headerTitle}>{t('TUIChat.Recent Chats')}</div> : undefined}
        right={!enableSearch
          ? (
            <ConversationCreate
              className={cs({
                [styles.conversationList__headerCreating]: isCreateModelShow,
              })}
              conversationList={conversationList}
              visible={enableCreate}
              onChangeCreateModelVisible={visible => setIsCreateModelShow(visible)}
              onBeforeCreateConversation={onBeforeCreateConversation}
              onConversationCreated={onConversationCreated}
            />
          )
          : undefined}
      >
        {enableSearch && (
          <ConversationSearch
            {...(enableLocalSearch !== undefined ? { enableLocalSearch } : {})}
          />
        )}
        {enableSearch && (
          <ConversationCreate
            className={cs({
              [styles.conversationList__headerCreating]: isCreateModelShow,
            })}
            conversationList={conversationList}
            visible={enableCreate}
            onChangeCreateModelVisible={visible => setIsCreateModelShow(visible)}
            onBeforeCreateConversation={onBeforeCreateConversation}
            onConversationCreated={onConversationCreated}
          />
        )}
      </Header>
      <List
        empty={renderConversationList.length === 0}
        loading={!conversationList}
        error={false}
        PlaceholderEmptyList={PlaceholderEmptyList}
        PlaceholderLoadError={PlaceholderLoadError}
        PlaceholderLoading={PlaceholderLoading}
      >
        {renderConversationList.map((conversation: ConversationInfo) => (
          <ConversationPreview
            key={conversation.conversationID}
            conversation={conversation}
            enableActions={enableActions}
            Preview={Preview}
            Avatar={Avatar}
            ConversationActions={ConversationActions}
            onSelectConversation={handleSelectConversation}
            actionsConfig={actionsConfig}
          />
        ))}
      </List>
    </div>
  );
}

function ConversationListH5(props: PropsWithChildren<ConversationListProps>) {
  return <ConversationListComponent {...props} />;
}

export { ConversationListH5 };
export default ConversationListH5;