import { useModel } from '@umijs/max';
import { Avatar, Divider, Flex, Space } from 'antd';
import styles from './index.less';

type UserSpaceProps = {
  users: any[];
};

function UserSpace({ users = [] }: UserSpaceProps) {
  const { initialState } = useModel('@@initialState');
  const { currentUser } = initialState || {};

  return (
    <div className={styles['user-space']}>
      <div className={styles['user-space__title']}>工作空间管理</div>
      <div style={{ padding: '0 20px' }}>
        <Avatar
          size={56}
          shape="circle"
          className={styles['user-space__avatar']}
          src={currentUser?.avatar}
          alt=""
          icon={
            <img
              src={require('@/assets/img/avatar-default.png')}
              width={56}
              height={56}
              draggable={false}
              alt=""
            />
          }
        ></Avatar>
        <div className={styles['user-space__name']}>{currentUser?.nickName}</div>
        <div className={styles['user-space__role']}>{currentUser?.roleNames?.[0]?.roleName}</div>
        <Divider
          dashed
          style={{ borderColor: 'rgba(22, 100, 255, 0.19)', margin: '20px 0' }}
        ></Divider>
        <div className={styles['user-space__participant']}>
          <Space align="center" size={10} style={{ marginBottom: '20px' }}>
            <div className={styles['user-space__participant__title']}>参与者</div>
            <div className={styles['user-space__participant__count']}>8</div>
          </Space>
          <Flex align="center" gap={12} wrap="wrap">
            {users?.map((_item, index) => {
              return (
                <Avatar
                  key={index}
                  size={36}
                  src={require(`@/assets/img/user-avatar/${index + 1}.png`)}
                  alt=""
                  icon={
                    <img
                      src={require('@/assets/img/avatar-default.png')}
                      width={36}
                      height={36}
                      draggable={false}
                      alt=""
                    />
                  }
                ></Avatar>
              );
            })}
          </Flex>
        </div>
      </div>
    </div>
  );
}

export default UserSpace;
