import type React from 'react';
import { useEffect, useMemo, useState } from 'react';
import { useUIContext } from 'tuikit-atomicx-react/chat';
import { IconChevronLeft, useUIKit } from '@tencentcloud/uikit-base-component-react';
import cs from 'classnames';
import styles from './ConversationCreate.module.scss';
import { ConversationCreateButton } from './ConversationCreateButton';
import { ConversationCreateGroupDetail } from './ConversationCreateGroupDetail';
import { ConversationCreateUserSelectList } from './ConversationCreateUserSelectList';
import type { ConversationCreateProps } from '../../../types/conversation';
import { PageStateTypes } from '../../../types/conversation';
import type { ConversationInfo } from 'tuikit-atomicx-react/chat';

export function ConversationCreate<T extends ConversationCreateProps>(props: T) {
  const {
    visible = true,
    className,
    style,
    onChangeCreateModelVisible,
    conversationList = [],
    onBeforeCreateConversation,
    onConversationCreated,
  } = props;
  const { t } = useUIKit();
  const { setActiveConversation } = useUIContext();

  const [showCreateModel, setShowCreateModel] = useState(false);
  const [isCreateGroup, setIsCreateGroup] = useState(false);
  const [pageState, setPageState] = useState<PageStateTypes>(PageStateTypes.USER_SELECT);
  const [selectList, setSelectList] = useState([]);

  const _onConversationCreated = (conversation: ConversationInfo) => {
    setShowCreateModel(false);
    resetCreatePageState();
    setActiveConversation(conversation.conversationID);
    onConversationCreated?.(conversation);
  };

  useEffect(() => {
    onChangeCreateModelVisible?.(showCreateModel);
  }, [onChangeCreateModelVisible, showCreateModel]);

  const back = () => {
    if (isCreateGroup) {
      switch (pageState) {
        case PageStateTypes.USER_SELECT:
          setIsCreateGroup(false);
          break;
        case PageStateTypes.CREATE_DETAIL:
          setPageState(PageStateTypes.USER_SELECT);
          setSelectList([]);
          break;
        case PageStateTypes.GROUP_TYPE:
          setPageState(PageStateTypes.CREATE_DETAIL);
          break;
        default:
      }
    } else {
      setShowCreateModel(false);
      resetCreatePageState();
    }
  };

  function resetCreatePageState() {
    setIsCreateGroup(false);
    setPageState(PageStateTypes.USER_SELECT);
    setSelectList([]);
  }

  return useMemo(() => {
    if (!visible) {
      return null;
    }

    return (
      <div
        className={cs(
          styles.conversationCreate__container,
          className,
        )}
        style={style}
      >
        {!showCreateModel && (
          <ConversationCreateButton
            onClick={() => setShowCreateModel(true)}
          />
        )}
        {showCreateModel && (
          <div className={styles.conversationCreate__main}>
            <div className={styles.conversationCreate__header}>
              <div className={styles.conversationCreate__icon} onClick={back}><IconChevronLeft size="24px" /></div>
              <div className={styles.conversationCreate__title}>{t(!isCreateGroup ? 'TUIConversation.Start chat' : 'TUIConversation.Add Participants')}</div>
            </div>
            {
              pageState === PageStateTypes.USER_SELECT
                ? (
                  <ConversationCreateUserSelectList
                    isCreateGroup={isCreateGroup}
                    setIsCreateGroup={setIsCreateGroup}
                    selectList={selectList}
                    setSelectList={setSelectList as React.Dispatch<React.SetStateAction<any[]>>}
                    conversationList={conversationList}
                    onBeforeCreateConversation={onBeforeCreateConversation}
                    onConversationCreated={_onConversationCreated}
                    setPageState={setPageState}
                  />
                )
                : (
                  <ConversationCreateGroupDetail
                    pageState={pageState}
                    setPageState={setPageState}
                    profileList={selectList}
                    onBeforeCreateConversation={onBeforeCreateConversation}
                    onConversationCreated={_onConversationCreated}
                  />
                )
            }
          </div>
        )}
      </div>
    );
  }, [
    visible,
    className,
    style,
    showCreateModel,
    back,
    t,
    isCreateGroup,
    pageState,
    selectList,
    conversationList,
    onBeforeCreateConversation,
    _onConversationCreated,
  ]);
}

export default ConversationCreate;