import TemplateContainer from '@/pages/TemplateContainer';
import { GetUserAgentInfo, GetUserInfo } from '@/services/services/user';
import { RedoOutlined } from '@ant-design/icons';
import { useModel } from '@umijs/max';
import { Avatar, Button, Card, Col, Input, message, Modal, Row, Spin, Tag } from 'antd';
import React, { useEffect, useState } from 'react';
import UserCenterUserInfo from '../UserCenterUserInfo';
import UserCenterAgentMessage from '../UserCenterAgentMessage';
import { useSoftStore } from '@/store/software';

const UserCenter: React.FC = () => {
  const { initialState, setInitialState } = useModel('@@initialState');
  const [messageApi, messageHolder] = message.useMessage();
  const [modalApi, modalHolder] = Modal.useModal();
  const { setTopSpinTip, setTopSpinning } = useSoftStore();
  const [userAgentUserInfo, setUserAgentUserInfo] = useState<UserModel.UserAgentInfo>();

  useEffect(() => {
    if (initialState?.currentUser?.id) {
      // 初始化加载用户信息
      setTopSpinning(true);
      setTopSpinTip("正在获取用户信息。。。");
      GetUserInfo(initialState?.currentUser?.id).then(async (res) => {
        setInitialState({ ...initialState, currentUser: res });
        localStorage.setItem('userInfo', JSON.stringify(res));
        let agentInfo = await GetUserAgentInfo();
        setUserAgentUserInfo(agentInfo);
      }).catch((error) => {
        console.log(error)
      }).finally(() => {
        setTopSpinning(false);
      })
    }
  }, [])

  function renderTitie() {
    return (
      <div style={{ display: 'flex' }}>
        <div style={{ marginRight: 10, display: 'flex', alignItems: 'center' }}>
          <Avatar style={{ backgroundColor: '#2982ff', verticalAlign: 'middle' }} size="large" gap={1} >
            {initialState?.currentUser?.userName?.substring(0, 1)}
          </Avatar>
        </div >
        <div style={{ margin: "20px" }}>
          <div style={{ display: "flex", alignItems: 'center' }}>
            <Tag bordered={false} color="blue">{"ID: " + initialState?.currentUser?.id}</Tag>
            <span>{initialState?.currentUser?.userName}</span>
          </div>
          <div>

            {initialState?.currentUser?.roleNames?.map((item: any) => {
              return <Tag bordered={false} color="green" key={item}>{item}</Tag>
            })}
          </div>
        </div>
      </div >
    )
  }

  return (
    <TemplateContainer navTheme={initialState?.settings?.navTheme ?? "realDark"} style={{ minWidth: 600 }}>
      <div>
        <Card hoverable title={renderTitie()} style={{ width: "100%" }}>
          <Row justify="start" wrap>
            <Col style={{ minWidth: 100 }} span={2}>
              <div>可激活总数</div>
              <strong style={{ fontSize: 24, color: "goldenrod" }}>{initialState?.currentUser?.allDeviceCount}</strong>
            </Col>
            <Col span={2} style={{ minWidth: 100 }}>
              <div>余换绑次数</div>
              <strong style={{ fontSize: 24, color: "goldenrod" }}>{initialState?.currentUser?.freeCount}</strong>
            </Col>
            <Col hidden={!initialState?.currentUser?.roleNames?.includes("Agent User")} span={2} style={{ minWidth: 100 }}>
              <div>代理分成</div>
              <strong style={{ fontSize: 24, color: "goldenrod" }}>{(initialState?.currentUser?.agentPercent ?? 0.5) * 100}%</strong>
            </Col>
            <Col span={2} style={{ minWidth: 100 }}>
              <div>
                <span>邀请码</span>
                <Button icon={<RedoOutlined />} style={{ marginLeft: 5 }} type="default" shape="circle" size='small'></Button>
              </div>
              <strong style={{ fontSize: 24, color: "goldenrod" }}>{initialState?.currentUser?.affiliateCode}</strong>
            </Col>
          </Row>
        </Card>
      </div>
      <div style={{ marginTop: 10 }}>
        <Row gutter={16}>
          <Col span={12}>
            <UserCenterUserInfo />
          </Col>
          <Col span={12}>
            <UserCenterAgentMessage userAgentUserInfo={userAgentUserInfo} setUserAgentUserInfo={setUserAgentUserInfo} />
          </Col>
        </Row>
      </div>
      {modalHolder}
      {messageHolder}
    </TemplateContainer>
  );
};

export default UserCenter;