import { Avatar, Popover, Tag } from 'antd';
import _ from 'lodash';
import React from 'react';

import IconFont from './IconFonts';

type PopupProp = {
  user: any;
  children: any;
  chat: any;
};

const UserInfoPopup: React.FC<PopupProp> = ({ user, children, chat }) => {
  const { onlineUserIDs } = chat;
  const userProfile = {
    ...user,
    online: _.includes(onlineUserIDs, user?.user_id),
  };

  return (
    <Popover
      placement="right"
      trigger="click"
      overlayInnerStyle={{ borderRadius: 10 }}
      content={
        <div className="w-48">
          <div className="flex items-start justify-between">
            <Avatar src={userProfile?.avatar} size={80} />
            <Tag className="m-0" color={userProfile?.online ? 'green' : 'gray'}>
              {userProfile?.online ? '在线' : '离线'}
            </Tag>
          </div>
          <div className="mt-4 font-bold">
            <IconFont icon="icon-user" className="mr-1" />
            {userProfile?.user_name}
          </div>
          <div className="mt-4">
            <IconFont icon="icon-email" className="mr-1" />
            {userProfile?.user_email}
          </div>
          <div className="mt-4 font-medium">{userProfile?.is_user_org_owner ? '管理员' : '普通成员'}</div>
        </div>
      }
    >
      {children}
    </Popover>
  );
};

export default UserInfoPopup;