import { Modal, Spin, Avatar } from 'antd';
import { memo, useEffect, useState } from 'react';
import style from './index.less';
import { MessageFilled } from '@ant-design/icons';
import { getFeishuUserDetail } from '../server';
import { FormattedMessage, useDispatch, useSelector, useIntl } from 'umi';
import bg from './bg.png';

const UserInfo = () => {
  const { formatMessage } = useIntl();
  const SexMap = {
    0: formatMessage({ id: 'base.common.user.state.sex.0', defaultMessage: '男' }),
    1: formatMessage({ id: 'base.common.user.state.sex.1', defaultMessage: '女' }),
    2: formatMessage({ id: 'base.common.user.state.sex.2', defaultMessage: '保密' }),
  };
  const dispatch = useDispatch();
  const { showUserInfo, userId, account } = useSelector<{ public: API.StoreState }, API.StoreState>(
    (state: any) => state.public,
  );
  const [user, setUser] = useState<Partial<API.FeishuUser>>({});

  const [loading, setLoading] = useState(true);
  const handleCancel = () => {
    dispatch({
      type: 'public/showFeishuUserDetail',
      payload: {
        showUserInfo: false,
      },
    });
  };
  useEffect(() => {
    if (showUserInfo) {
      setUser({});
      setLoading(true);
      getFeishuUserDetail({ userId, account })
        .then((data) => {
          setUser(data?.data);
        })
        .finally(() => {
          setLoading(false);
        });
    }
  }, [showUserInfo, userId, account]);
  return (
    <Modal
      width={320}
      style={{ borderRadius: 8, padding: 0, overflow: 'hidden' }}
      bodyStyle={{ padding: 0 }}
      zIndex={9999}
      title={null}
      open={showUserInfo}
      destroyOnClose
      footer={null}
      onCancel={handleCancel}
    >
      <div className={style.userInfo}>
        <div className={user.state === 0 ? style.userInfoDimission : null}>
          <img width={320} height={136} src={bg} />
        </div>
        {loading ? (
          <div className={style.userInfoLoading}>
            <Spin spinning={loading} />
          </div>
        ) : (
          <div className={style.userInfoContainer}>
            <div>
              <div className={style.userInfoIcon}>
                <Avatar size={96} style={{ fontSize: 60 }} src={user?.avatar?.avatar_240}>
                  {user?.account?.charAt(0).toUpperCase()}
                </Avatar>
              </div>
              <div className={style.userInfoName}>
                {user.nameZh}({user.account})
                {user.state === 0 ? (
                  <span className={style.userInfoNameDim}>
                    <FormattedMessage id="base.common.user.state.dimission" defaultMessage="离职" />
                  </span>
                ) : (
                  ''
                )}
              </div>
            </div>
            <div>
              <div>
                <button
                  className={style.userInfoButtons}
                  disabled={user.state === 0}
                  onClick={() => {
                    if (user.state === 1) {
                      // @ts-ignore
                      window.open(
                        `https://applink.feishu.cn/client/chat/open?openId=${user.larkOpenId}`,
                        '_blank',
                      );
                    }
                  }}
                >
                  <div>
                    <MessageFilled style={{ fontSize: 16 }} className={style.userInfoBtnMsg} />
                    <FormattedMessage id="base.common.user.state.message" defaultMessage="消息" />
                  </div>
                </button>
              </div>
              <div className={style.userInfoTextContainer}>
                <div className={style.userInfoGrid}>
                  <div className={style.userInfoGridLabel}>
                    <FormattedMessage
                      id="base.common.user.state.department"
                      defaultMessage="部门"
                    />
                  </div>
                  <div className={style.userInfoGridVaule}>{user.department}</div>
                  <div className={style.userInfoGridLabel}>
                    <FormattedMessage id="base.common.user.state.jobName" defaultMessage="职务" />
                  </div>
                  <div className={style.userInfoGridVaule}>{user.jobName}</div>
                  <div className={style.userInfoGridLabel}>
                    <FormattedMessage id="base.common.user.state.email" defaultMessage="邮箱" />
                  </div>
                  <div className={style.userInfoGridVaule}>{user.email}</div>
                  {/* <div className={style.userInfoGridLabel}>
                    <FormattedMessage
                      id="base.common.user.state.workStation"
                      defaultMessage="工作地点"
                    />
                  </div>
                  <div className={style.userInfoGridVaule}>{user.workStation}</div>
                  <div className={style.userInfoGridLabel}>
                    <FormattedMessage id="base.common.user.state.sex" defaultMessage="性别" />
                  </div>
                  <div className={style.userInfoGridVaule}>{user.sex ? SexMap[user.sex] : ''}</div> */}
                  {user.companyNumber ? (
                    <>
                      <div className={style.userInfoGridLabel}>
                        <FormattedMessage id="base.common.user.state.id" defaultMessage="工号" />
                      </div>
                      <div className={style.userInfoGridVaule}>{user.companyNumber}</div>
                    </>
                  ) : null}
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
    </Modal>
  );
};

export default memo(UserInfo);