import type React from 'react';
import type { ContactInfo } from 'tuikit-atomicx-react/chat';
import { IconCloseCircleFilled } from '@tencentcloud/uikit-base-component-react';
import { Avatar } from 'tuikit-atomicx-react/chat';
import styles from './ConversationCreateSelectView.module.scss';

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

export function ConversationCreateSelectView(props: ConversationCreateSelectViewProps) {
  const { selectList, setSelectList } = props;
  const close = (index: number) => {
    selectList.splice(index, 1);
    setSelectList([...selectList]);
  };
  return (
    <div className={styles.conversationCreateSelectView}>
      {
        selectList.map((profile, index) => {
          const { nickname, userID, avatarURL } = profile;
          return (
            <div className={styles.conversationCreateSelectView__item} key={userID}>
              <div
                className={styles.conversationCreateSelectView__close}
                onClick={() => {
                  close(index);
                }}
              >
                <IconCloseCircleFilled />
              </div>
              <Avatar src={avatarURL} />
              <div className={styles.conversationCreateSelectView__nick}>{nickname || userID}</div>
            </div>
          );
        })
      }
    </div>
  );
}

export default ConversationCreateSelectView;