/** @format */

import * as React from 'react';
import { Link, useHistory } from 'react-router-dom';
import { getLocalStorage } from '../utils/webStorage';
import { Layout, Breadcrumb, BackTop, Row, Col } from 'antd';
import classnames from 'classnames';
import ColorPicker from '../components/colorPicker';
import PathHistory from './tabs';
import logo from '../assets/img/logo.png';
import MiniLogo from '../assets/img/miniLog.png';
import Button from '../components/button';
import Menus from './menus';
import { Icon, Badge, Avatar, Dropdown, Menu, } from 'antd';
import styles from './styles/index.module.scss';
import {
    MessageOutlined,
    BellOutlined,
    SettingOutlined,
    LoginOutlined,
    UserOutlined,
    DownOutlined
} from "@ant-design/icons";
import { createFooterText } from '../const/docs';

const { Header, Content } = Layout;
interface breadcrumbProps {
    [propnmae: string]: string;
}
//生成顶部的层级关系
const breadcrumbNameMap: breadcrumbProps = {
    '/home': '首页',
};
//生成历史记录的完整列表
const allHistory = {};
interface homeProps {
    children: any[];
}
const Home: React.FunctionComponent<homeProps> = props => {
    const [collapsed, setState] = React.useState(false);
    const [userState, setUserState] = React.useState({
        userName: '',
    });
    const history = useHistory();
    const handleToggle = () => {
        setState(!collapsed);
    };
    React.useEffect(() => {
        const [error, userInfo] = getLocalStorage('userinfo');
        if (!error) {
            setUserState(preState => ({ ...preState, ...userInfo }));
        }
    }, []);
    const handleLogOut = () => {
        localStorage.clear();
        history.push('/');
    };
    props.children.map(element => {
        if (element && element.props && element.props.path) {
            breadcrumbNameMap[element.props.path] = element.props.breadcrumbName;
            if (!element.props.render) {
                allHistory[element.props.path] = element.props.breadcrumbName;
            }
        }
    });
    //拆分当前url pathname
    const pathSnippets = location.pathname.split('/').filter(i => i);

    const breadcrumbItems = pathSnippets.map((_, index) => {
        const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
        return (
            <Breadcrumb.Item key={url}>
                <span>{breadcrumbNameMap[url]}</span>
            </Breadcrumb.Item>
        );
    });

    return (
        <Layout className={styles.homeWrapper}>
            <Layout.Sider breakpoint='lg' className={styles.slider} collapsed={collapsed}>
                <div className={styles.logoWrapper}>
                    <Link to='/home'>
                        {collapsed ? (
                            <img className={styles.logo} src={MiniLogo} alt='' />
                        ) : (
                            <img className={styles.logo} src={logo} alt='' />
                        )}
                    </Link>
                </div>
                <Menus />
            </Layout.Sider>
            <Layout className={styles.rightContentWrapper} style={{ paddingLeft: collapsed ? 80 : 200 }}>
                <div className={styles.headerWarpper} style={{ paddingLeft: collapsed ? 80 : 200 }}>
                    <Header className={styles.header}>
                        <Row type='flex' justify='space-between' align='middle'>
                            <Col span={19}>
                                <Breadcrumb className={styles.breadcrumb}>
                                    <Breadcrumb.Item>
                                        <Icon
                                            title='收缩'
                                            type={collapsed ? 'menu-unfold' : 'menu-fold'}
                                            onClick={handleToggle}
                                        />
                                    </Breadcrumb.Item>
                                    {breadcrumbItems}
                                </Breadcrumb>
                            </Col>
                            <Col span={5} style={{ textAlign: 'center' }}>
                                <Col span={6}>
                                    {/* <ColorPicker>
                                        <Button>主题切换</Button>
                                    </ColorPicker> */}
                                    <Badge overflowCount={10}>
                                        <Avatar icon={<MessageOutlined />} />
                                    </Badge>
                                </Col>
                                <Col span={6}>
                                    <Badge overflowCount={10}>
                                        <Avatar icon={<BellOutlined />} />
                                    </Badge>
                                </Col>
                                <Col span={12}>
                                    <Dropdown
                                        overlay={() => {
                                            return (
                                                <Menu>
                                                    <Menu.Item key={'setting'}>
                                                        <SettingOutlined /> 个人设置
                                                    </Menu.Item>
                                                    <Menu.Item key={'password'}>
                                                        <SettingOutlined /> 修改密码
                                                    </Menu.Item>
                                                    <Menu.Item key={'loginOut'}>
                                                        <a
                                                            target="_blank"
                                                            rel="noopener noreferrer"
                                                            onClick={handleLogOut}
                                                        >
                                                            <LoginOutlined></LoginOutlined>&nbsp;&nbsp;退出
                                                        </a>
                                                    </Menu.Item>
                                                </Menu>
                                            );
                                        }}
                                    >
                                        <a
                                            className="ant-dropdown-link"
                                            onClick={(e) => e.preventDefault()}
                                        >
                                            <Avatar
                                                style={{ backgroundColor: "#87d068" }}
                                                icon={<UserOutlined />}
                                            />
                                            <span
                                                className="layout-header-username"
                                                style={{ marginLeft: 3 }}
                                            >
                                                {userState.userName || "admin"}
                                            </span>
                                            <DownOutlined></DownOutlined>
                                        </a>
                                    </Dropdown>
                                </Col>
                            </Col>
                        </Row>
                    </Header>
                    <PathHistory complete={allHistory} />
                </div>
                <Content className={styles.content}>{props.children}</Content>
                <footer className={styles.footer}>
                    <span>{createFooterText()}</span>
                </footer>
            </Layout>
            <BackTop />
        </Layout>
    );
};
export default Home;
