import React, { useMemo, useRef } from 'react';
import { Link, Outlet, useLocation } from '@umijs/max';
import { Result, Button, Layout, Avatar } from 'antd';
import Authorized from '@/utils/Authorized';
import { getMatchMenu } from '@umijs/route-utils';
import logo from '@/assets/logo.svg'
import { CarryOutOutlined, UserSwitchOutlined } from '@ant-design/icons';
import moment from 'moment';
import { getSessionUserData } from '@/utils/session';

const noMatch = (
    <Result
        status={403}
        title="403"
        subTitle="Sorry, you are not authorized to access this page."
        extra={
            <Button type="primary">
                <Link to="/user/login">Go Login</Link>
            </Button>
        }
    />
);

const TopLayout: React.FC<{}> = (props) => {
    const location = useLocation()

    const { Header, Content } = Layout;

    const menuDataRef = useRef<any[]>([]);

    let data = getSessionUserData();

    const authorized = useMemo(
        () =>
            getMatchMenu(location.pathname || '/', menuDataRef.current).pop() || {
                authority: undefined,
            },
        [location.pathname],
    );


    return (
        <Authorized authority={authorized!.authority} noMatch={noMatch}>
            <Layout>
                <Header style={{ position: 'fixed', zIndex: 1, width: '100%', background: '#b30000', height: '56px' }}>
                    <div className="top-menu">
                        <div className="left-logo" style={{ color: '#fff', top: '-4px' }}>
                            <img src={logo} alt="" />中国联通智慧供应链平台 ｜ 招标采购中心
                        </div>
                        <ul className="right-btns">
                            <li><CarryOutOutlined />{moment().format("YYYY-MM-DD")}</li>
                            {data?.organizationName == null ? null : (<li><UserSwitchOutlined />{data?.organizationName}</li>)}
                            <li>
                                <Avatar size="small" src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png" style={{ width: '30px' }} />
                                <a className="antd-dropdown-link" style={{ color: "#fff" }}>
                                    {data?.fullName}
                                </a>
                            </li>
                        </ul>
                    </div>
                </Header>
                <Content style={{ padding: '0 24px', marginTop: 64, width: '100%' }}>
                    <Outlet />
                </Content>
            </Layout>
        </Authorized>
    );
};

export default TopLayout;