import { useState } from 'react';
import { GroupType } from 'tuikit-atomicx-react/chat';
import { useUIContext, useGroupStore, useLoginStore } from 'tuikit-atomicx-react/chat';
import { Button, IconChevronRight, Toast, useUIKit } from '@tencentcloud/uikit-base-component-react';
import { InputLegacy } from '../../../../baseComp';
import {
  defaultGroupAvatarWork,
  defaultGroupAvatarAVChatRoom,
  defaultGroupAvatarMeeting,
  defaultGroupAvatarPublic,
  defaultUserAvatar,
} from '../../../../constant/avatar';
import { PageStateTypes } from '../../../../types/conversation';
import { Avatar } from 'tuikit-atomicx-react/chat';
import { ConversationGroupTypeInfo, typeInfoList } from '../ConversationGroupTypeInfo';
import styles from './ConversationCreateGroupDetail.module.scss';
import type { ConversationCreateGroupDetailProps } from '../../../../types/conversation';
import type { GroupCreateParams } from 'tuikit-atomicx-react/chat';

export function ConversationCreateGroupDetail(props: ConversationCreateGroupDetailProps) {
  const {
    profileList,
    pageState,
    setPageState,
    onBeforeCreateConversation,
    onConversationCreated,
  } = props;
  const { t } = useUIKit();
  const { createGroup, joinGroup } = useGroupStore();
  const { setActiveConversation } = useUIContext();
  const { loginUserInfo } = useLoginStore();

  const myProfile = loginUserInfo;
  const temp = [myProfile, ...profileList];
  const name = temp.map(item => item?.nickname || item?.userID).toString();
  const [groupName, setGroupName] = useState(
    name.length >= 15 ? `${name.slice(0, 12)}...` : name,
  );
  const [groupID, setGroupID] = useState('');
  const [groupType, setGroupType] = useState<GroupType>(GroupType.Work);

  const groupInfoChange = (e: any, type: string) => {
    const { value } = e.target;
    switch (type) {
      case 'name':
        setGroupName(value);
        break;
      case 'id':
        setGroupID(value);
        break;
      case 'type':
        setGroupType(value);
        break;
      default:
    }
  };
  const showGroupTypeInfo = () => {
    setPageState(PageStateTypes.GROUP_TYPE);
  };
  const getDefaultAvatar = (type: GroupType) => {
    switch (type) {
      case GroupType.Work:
        return defaultGroupAvatarWork;
      case GroupType.Public:
        return defaultGroupAvatarPublic;
      case GroupType.Meeting:
        return defaultGroupAvatarMeeting;
      case GroupType.AVChatRoom:
        return defaultGroupAvatarAVChatRoom;
      default:
        return '';
    }
  };
  // eslint-disable-next-line
  // @ts-ignore
  const getDes = () => typeInfoList?.find((item: any) => item.type === groupType).des;
  const next = async () => {
    const memberList = profileList.map(item => item.userID);
    const avatar = getDefaultAvatar(groupType);
    const options: GroupCreateParams = {
      groupName,
      groupType,
      groupID: groupType !== GroupType.Community ? groupID : undefined,
      avatarURL: avatar,
      memberList,
    };
    const _options = onBeforeCreateConversation?.(options) || options;
    try {
      const createdGroupID = await createGroup(_options);
      if (groupType === GroupType.AVChatRoom) {
        await joinGroup(createdGroupID);
      }
      const conversationID = `GROUP${createdGroupID}`;
      setActiveConversation(conversationID);
      onConversationCreated?.({ conversationID } as any);
    } catch (error: any) {
      Toast.error({ message: error.message });
    }
  };
  return pageState !== PageStateTypes.GROUP_TYPE
    ? (
      <>
        <div className={styles.conversationCreateGroupDetail__main}>
          <div className={`${styles.conversationCreateGroupDetail__box} ${styles.conversationCreateGroupDetail__name}`}>
            <InputLegacy
              maxLength={15}
              value={groupName}
              onChange={(e) => {
                groupInfoChange(e, 'name');
              }}
              border="bottom"
              inputClassName={styles.conversationCreateGroupDetail__inputText}
              clearable
              placeholder={t('TUIConversation.Group Name')}
            />
          </div>
          <div className={styles.conversationCreateGroupDetail__box}>
            <InputLegacy
              border="bottom"
              inputClassName={styles.conversationCreateGroupDetail__inputText}
              clearable
              value={groupID}
              onChange={(e) => {
                groupInfoChange(e, 'id');
              }}
              placeholder={t('TUIConversation.Group ID')}
            />
          </div>
          <div className={styles.conversationCreateGroupDetail__box} onClick={showGroupTypeInfo}>
            <InputLegacy
              readOnly
              border="bottom"
              inputClassName={styles.conversationCreateGroupDetail__inputText}
              prefix={<div className={styles.conversationCreateGroupDetail__inputTitle}>{t('TUIConversation.Group Type')}</div>}
              suffix={(
                <IconChevronRight />
              )}
              value={t(`TUIConversation.${groupType}`)}
              onChange={(e) => {
                groupInfoChange(e, 'type');
              }}
            />
          </div>
          <div className={styles.conversationCreateGroupDetail__illustrate}>
            {t(`TUIConversation.${getDes()}`)}
          </div>
          <div className={styles.conversationCreateGroupDetail__portrait}>
            <div className={styles.conversationCreateGroupDetail__portraitTitle}>{t('TUIConversation.Participants')}</div>
            <div className={styles.conversationCreateGroupDetail__portraitInfoContainer}>
              {profileList.map(({ avatarURL, userID, nickname }) => (
                <div className={styles.conversationCreateGroupDetail__portraitInfo} key={userID}>
                  <Avatar src={avatarURL || defaultUserAvatar} />
                  <div
                    className={styles.conversationCreateGroupDetail__portraitInfoNick}
                  >
                    {nickname || userID}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
        <div className={styles.conversationCreateGroupDetail__nextContainer}>
          <Button onClick={next}>{t('TUIConversation.Create')}</Button>
        </div>
      </>
    )
    : (
      <ConversationGroupTypeInfo
        groupType={groupType}
        setGroupType={setGroupType}
        setPageState={setPageState}
      />
    );
}

export default ConversationCreateGroupDetail;