import React, { useState, useEffect } from "react";
import {
  LockOutlined,
  UserOutlined,
  LogoutOutlined,
  SearchOutlined,
} from "@ant-design/icons";
import { Layout, Menu, theme, Dropdown, Tooltip, Avatar, Button } from "antd";
import { Outlet, useLocation, history, useOutletContext } from "umi";
import { doFetch } from "@/utils/doFetch";
import Fade from "react-reveal/Fade";
const { Header, Content, Footer, Sider } = Layout;

function Headers({ currentUser, children, broken }) {
  const {
    token: { colorBgContainer, colorTextBase },
  } = theme.useToken();

  const items = [
    {
      key: "1",
      label: (
        <span target="_blank" rel="noopener noreferrer">
          个人中心
        </span>
      ),
      icon: <UserOutlined />,
    },
    {
      key: "2",
      label: (
        <span target="_blank" rel="noopener noreferrer">
          修改密码
        </span>
      ),
      icon: <LockOutlined />,
    },
    {
      key: "4",
      danger: true,
      label: "退出登录",
      icon: <LogoutOutlined />,
    },
  ];

  return (
    <Header
      style={{
        padding: 0,
        background: colorBgContainer,
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
        marginTop: 10,
      }}
    >
      <div style={{ marginLeft: 24 }} className="centerl">
        {broken && children}
        <Button
          icon={<SearchOutlined></SearchOutlined>}
          type="text"
          shape="circle"
        ></Button>
      </div>
      <div style={{ marginRight: 112, gap: 12 }} className="centerl">
        <Dropdown
          menu={{
            items,
            onClick:(e)=>{
                if(e.key === "1"){
                    history.push("/mycenter")
                }

            }
          }}
          placement="bottom"
        >
          <Avatar size={"large"} src={currentUser?.head_url}></Avatar>
        </Dropdown>

        <b>{currentUser?.name ?? "-"}</b>
      </div>
    </Header>
  );
}

export default Headers;