import React, { useContext } from "react";
import { List, ListItem, ListItemText, Divider, Button } from "@mui/material";
import { UserInfoContext } from "../../context/UserInfoContext";
import PageLayout from "../../../Common/Layout/PageLayout";
import PageHeader from "../../../Common/PageHeader/PageHeader";
import Link from "../../components/Link";
import { AUTH_STATUS, AUTH_STATUS_TYPE } from "../../constants";

function authStatus2Cname(status: AUTH_STATUS_TYPE) {
  return (
    Object.values(AUTH_STATUS).find((item) => item.value === status)?.cname ||
    ""
  );
}

const UserInfo: React.FC = () => {
  const userInfo = useContext(UserInfoContext);
  if (!userInfo) return null;

  const NOT_AUTH = AUTH_STATUS.REJECT.value;
  return (
    <>
      <PageHeader label="用户信息"></PageHeader>
      <PageLayout>
        <List component="nav" style={{ maxWidth: 700 }}>
          <ListItem>
            <ListItemText
              primary={
                <>
                  <strong style={{ fontSize: 20 }}>
                    您好，{userInfo.company_name || userInfo.email}
                  </strong>
                </>
              }
              secondary={<>上次登录时间： {userInfo.last_login_time}</>}
            ></ListItemText>
          </ListItem>

          <ListItem alignItems="flex-start">
            <ListItemText
              primary="注册时间"
              secondary={<>{userInfo.register_time}</>}
            />
          </ListItem>
          <Divider />
          <ListItem alignItems="flex-start">
            <ListItemText
              primary="上次登录时间"
              secondary={<>{userInfo.last_login_time}</>}
            />
          </ListItem>
          <Divider />
          <ListItem
            alignItems="flex-start"
            secondaryAction={<Button>更换</Button>}
          >
            <ListItemText
              primary="注册邮箱"
              secondary={<>{userInfo.email}</>}
            />
          </ListItem>
          <Divider />
          <ListItem
            alignItems="flex-start"
            secondaryAction={<Button>更换</Button>}
          >
            <ListItemText
              primary="手机号码"
              secondary={<>{userInfo.phone}</>}
            />
          </ListItem>
          <Divider />
          <ListItem
            alignItems="flex-start"
            secondaryAction={
              <Link to="/saturn/authentication/personal">
                <Button>去认证</Button>
              </Link>
            }
          >
            <ListItemText
              primary="个人认证"
              secondary={
                userInfo.user_authentication === NOT_AUTH
                  ? authStatus2Cname(userInfo.user_authentication)
                  : ""
              }
            />
          </ListItem>
          <Divider />
          <ListItem
            alignItems="flex-start"
            secondaryAction={
              <Link to="/saturn/authentication/company">
                <Button>去认证</Button>
              </Link>
            }
          >
            <ListItemText
              primary="企业认证"
              secondary={
                userInfo.company_authentication === NOT_AUTH
                  ? authStatus2Cname(userInfo.company_authentication)
                  : ""
              }
            />
          </ListItem>
          <Divider />
          <ListItem
            alignItems="flex-start"
            secondaryAction={<Button>修改</Button>}
          >
            <ListItemText
              primary="密码"
              secondary="安全性高的密码可以使账户更安全，建议您定期更换密码"
            />
          </ListItem>
          <Divider />
          <ListItem
            alignItems="flex-start"
            secondaryAction={<Button>修改</Button>}
          >
            <ListItemText
              primary="联系地址"
              secondary={userInfo.contact_address || "-"}
            />
          </ListItem>
          <Divider />
        </List>
      </PageLayout>
    </>
  );
};

export default UserInfo;
