import React from "react";
import { connect } from "react-redux";
import * as actionCreators from "store/actionCreators/index";
import { useHistory } from "react-router-dom";

import { Icon as LegacyIcon } from "@ant-design/compatible";
import { MoreOutlined, NotificationOutlined } from "@ant-design/icons";

import { Layout, Menu, Dropdown, Avatar } from "antd";

import styles from "./AppLayout.module.scss";

const { Header, Sider, Content } = Layout;

const menu = (signOut, history) => (
  <Menu>
    <Menu.Item>
      <a
        href="https://github.com/cnscorpions/React-Nest-Admin"
        target="_blank"
        rel="noopener noreferrer"
      >
        源码
      </a>
    </Menu.Item>
    <Menu.Item onClick={() => signOut(history)}>
      <span>退出</span>
    </Menu.Item>
  </Menu>
);

const AppLayout = props => {
  let history = useHistory();

  // 结构赋值
  const { isCollapsed, username, toggle, signOut } = props;

  return (
    <Layout className={styles.wrapper}>
      <Sider trigger={null} collapsible collapsed={isCollapsed}>
        {props.sidebar}
      </Sider>
      <Layout>
        <Header className={styles.header}>
          <LegacyIcon
            className={styles["trigger"]}
            type={isCollapsed ? "menu-unfold" : "menu-fold"}
            onClick={() => toggle(isCollapsed)}
          />
          <span className={styles.home}>首页</span>
          <div className={styles["icon-group"]}>
            <Avatar
              style={{
                color: "#f56a00",
                backgroundColor: "#fde3cf",
                marginRight: "10px"
              }}
            >
              {username ? username[0] : ""}
            </Avatar>
            <span>
              <NotificationOutlined />
            </span>
            <span className={styles["icon-box"]}>
              <Dropdown
                overlay={() => menu(signOut, history)}
                placement="bottomCenter"
              >
                <MoreOutlined className={styles.icon} />
              </Dropdown>
            </span>
          </div>
        </Header>
        <Content
          style={{
            margin: "24px 16px",
            padding: 24,
            background: "#fff",
            minHeight: 280,
            overflowY: "scroll"
          }}
        >
          {props.content}
        </Content>
      </Layout>
      {/* <div
        style={{
          position: "absolute",
          bottom: "0px",
          width: "100%",
          textAlign: "center",
          backgroundColor: "#2d3a4b",
          color: "#eee",
          padding: "5px 0",
          fontSize: "12px"
        }}
      >
        鄂ICP备19026512号-3
      </div> */}
    </Layout>
  );
};

const mapStateToProps = state => ({
  isCollapsed: state.layout.isCollapsed,
  username: state.layout.username
});

const mapDispatchToProps = dispatch => {
  return {
    toggle(isCollapsed) {
      const action = isCollapsed
        ? actionCreators.spreadSidebar()
        : actionCreators.collapseSidebar();
      dispatch(action);
    },
    signOut(history) {
      const unAuth = actionCreators.unauthenticate();
      dispatch(unAuth);
      const setDefaultLayout = actionCreators.setDefaultLayout();
      dispatch(setDefaultLayout);
      history.push("/login");
    }
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(AppLayout);