import type React from 'react';
import { useRef, useState, useEffect } from 'react';
import type { ContactInfo, ConversationInfo } from 'tuikit-atomicx-react/chat';
import { useUIContext, useContactStore } from 'tuikit-atomicx-react/chat';
import { Button, IconAdd, IconCheckCircleFilled, IconCircle, IconSearch, Toast, useUIKit } from '@tencentcloud/uikit-base-component-react';
import cs from 'classnames';
import { InputLegacy } from '../../../../baseComp';
import { PageStateTypes } from '../../../../types/conversation';
import { Avatar } from 'tuikit-atomicx-react/chat';
import { ConversationCreateSelectView } from '../ConversationCreateSelectView';
import useConversationCreate from '../hooks/useConversationCreate';
import styles from './ConversationCreateUserSelectList.module.scss';

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

export function ConversationCreateUserSelectList(props: ConversationCreateUserSelectListProps) {
  const { friendList: friendListResult, loadFriends } = useContactStore();
  const { setActiveConversation } = useUIContext();
  const {
    isCreateGroup,
    selectList,
    setSelectList,
    className,
    conversationList,
    setIsCreateGroup,
    setPageState,
    onBeforeCreateConversation,
    onConversationCreated,
  } = props;
  const { t } = useUIKit();
  const [searchValue, setSearchValue] = useState('');
  const [friendList, setFriendList] = useState<Record<string, ContactInfo[]>>({});

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

  const {
    friendListSortResult,
    getFriendListSortSearchResult,
  } = useConversationCreate(
    conversationList,
    friendListResult,
  );

  useEffect(() => {
    setFriendList(friendListSortResult);
  }, [friendListSortResult]);

  const userCheckedList = useRef(new Map());
  const searchValueChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const { value } = e.target;
    setSearchValue(value);
    setFriendList(await getFriendListSortSearchResult(value));
  };
  const createGroup = () => {
    setIsCreateGroup(true);
    userCheckedList.current.clear();
    setSelectList([]);
  };

  const userSelectListChange = (profile: ContactInfo) => {
    const { userID } = profile;
    if (!selectList.find(item => item.userID === userID)) {
      selectList.push(profile);
    } else {
      selectList.splice(selectList.findIndex(item => item.userID === userID), 1);
    }
    setSelectList([...selectList]);
  };

  const _createConversation = async (profile: ContactInfo) => {
    if (isCreateGroup) {
      return;
    }
    const { userID } = profile;
    onBeforeCreateConversation?.(userID);
    try {
      const conversationID = `C2C${userID}`;
      setActiveConversation(conversationID);
      onConversationCreated?.({ conversationID } as any);
    } catch (error: any) {
      Toast.error({ message: error.message });
    }
  };

  const handleUserItem = (profile: ContactInfo) => {
    if (isCreateGroup) {
      userSelectListChange(profile);
    } else {
      _createConversation(profile);
    }
  };

  const next = () => {
    if (selectList && selectList.length === 0) {
      Toast.error({ message: t('TUIConversation.Participant cannot be empty') });
      return;
    }
    setPageState(PageStateTypes.CREATE_DETAIL);
  };
  return (
    <>
      <InputLegacy
        className={styles.conversationCreateUserSelectList__searchInput}
        placeholder={t('TUIConversation.Search')}
        clearable
        value={searchValue}
        onChange={searchValueChange}
        prefix={<IconSearch />}
      />
      {(isCreateGroup) && (
        <ConversationCreateSelectView selectList={selectList} setSelectList={setSelectList} />
      )}
      {!isCreateGroup && (
        <div role="presentation" className={styles.conversationCreateUserSelectList__user} onClick={createGroup}>
          <IconAdd size="24px" />
          <div className={cs(styles.conversationCreateUserSelectList__userName, styles['conversationCreateUserSelectList__userName--active'])}>{t('TUIConversation.New group chat')}</div>
        </div>
      )}
      <div className={cs(styles.conversationCreateUserSelectList__container, className)}>
        <div className={styles.conversationCreateUserSelectList__list}>
          <div className={styles.conversationCreateUserSelectList__groupContainer}>
            {Object.keys(friendList).map(
              key => friendList[key].length !== 0 && (
                <div className={styles.conversationCreateUserSelectList__groupBox} key={key}>
                  <div className={styles.conversationCreateUserSelectList__title}>{key}</div>
                  {friendList[key].map((profile: ContactInfo) => {
                    const { userID, nickname, avatarURL } = profile;
                    return (
                      <label
                        role="presentation"
                        className={styles.conversationCreateUserSelectList__user}
                        htmlFor={`userChecked-${key}-${userID}`}
                        key={userID}
                        onClick={() => {
                          handleUserItem(profile);
                        }}
                      >
                        <Avatar src={avatarURL} />
                        <div className={styles.conversationCreateUserSelectList__userName}>{nickname || `${userID}` }</div>
                        {isCreateGroup && (
                          <div
                            className={styles.conversationCreateUserSelectList__userCheckbox}
                          >
                            {
                              selectList.find(item => item.userID === userID)
                                ? (
                                  <IconCheckCircleFilled
                                    className={styles.conversationCreateUserSelectList__activeIcon}
                                  />
                                )
                                : <IconCircle />
                            }
                          </div>
                        )}
                      </label>
                    );
                  })}
                </div>
              ),
            )}
          </div>
        </div>
      </div>
      {isCreateGroup && (
        <div className={styles.conversationCreateUserSelectList__nextContainer}>
          <Button onClick={next}>{t('TUIConversation.Next')}</Button>
        </div>
      )}
    </>
  );
}

export default ConversationCreateUserSelectList;