import { BellOutlined } from '@ant-design/icons';
import { Layout } from 'antd';
import React, { Suspense, useEffect, useMemo } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Outlet, useNavigate } from 'react-router';
import { useLocation } from 'react-router-dom';
import Icon1 from '../../assets/icons/icon.png';
import { SUBTITLE, TITLE, config } from '../../config';
import { findLeafMenu, findMenu } from '../../models/auth/menu';
import { Dispatch, RootState } from '../../models/store';
import { getParameter } from '../../utils/utils';
import HeaderUser from './HeaderUser';
import SiderMenu from './SiderMenu';
import BottomMenu from './BottomMenu';
import './style.less';


const { Header, Content, Sider } = Layout;


const DashboardLayout: React.FC = () => {

  const location = useLocation();
  const navigate = useNavigate();

  const pathname = location.pathname;

  const dispatch = useDispatch<Dispatch>();

  const user = useSelector((state: RootState) => state.auth.user);
  const menu = useSelector((state: RootState) => state.auth.menu);

  useEffect(() => {
    const token = getParameter('token') || 'demo';
    if (token) {
      dispatch.auth.regByToken(token).then(() => {
        dispatch.auth.loadMenu(undefined);
      });
    } else {
      if (user == null) {
        navigate('/login')
      } else {
        dispatch.auth.loadMenu(undefined);
      }
    }
  }, []);

  useEffect(() => {
    if (user === null) {

    }
    if (user === 'failed') {
      // 跳到主页面
      return;
    }
  }, [user]);

  const [menuIndexes, leafMenu] = useMemo(() => [
    findMenu(menu, pathname),
    findLeafMenu(menu, pathname),
  ], [menu, pathname]);

  useEffect(() => {
    if (leafMenu) {
      document.title = '小玉潭水库 · ' + leafMenu.title
    }
  }, [leafMenu]);


  if (user === 'failed') {
    return null;
  }

  return (
    <Layout className="app-root">
      {/*<Header className="app-header">
        <a className='app-icon-a' href='http://219.138.108.99:30046/guide/'>
          <img alt="..." className="app-icon" src={Icon1} />
          <span className="app-title">{TITLE}-{SUBTITLE}</span>
        </a>
        <TopMenu menu={menu} menuIndexes={menuIndexes} />
        <div className='flex-grow-1'></div>

        <span className='user-menu' style={{ padding: '0 19px' }}>
          <BellOutlined />
        </span>

        <HeaderUser user={user} />
      </Header>*/}

      <Layout>
        {/*{
          menuIndexes.length > 1 ? (
            <Sider className="app-sider" width={208}>
              <SiderMenu menu={menu} menuIndexes={menuIndexes} />
            </Sider>
          ) : null
        }*/}
        <Content className="app-content index-box">
          <div className="top-menu-box">
            <div className="txt left-txt">
              <img src={`${process.env.PUBLIC_URL}/assets/dw-icon.png`} />
              <div>咸丰</div>
              <img src={`${process.env.PUBLIC_URL}/assets/yun-icon.png`} className="img2"/>
              <div>32℃多云</div>
            </div>
            <div className="txt right-txt">
              <div>2023-10-13&nbsp;&nbsp;&nbsp;&nbsp;星期五</div>
              <div style={{color:"#979797",margin:"4px 12px"}}>|</div>
              <div>10:30:00</div>
            </div>
          </div>

          <div className="left-line"></div>
          <div className="right-line"></div>

          <div className={menuIndexes.length > 1 ? 'content-root content-box' : 'content-root-fs content-box'}>
            {
              user ? (
                <Suspense fallback={null}>
                  <Outlet />
                </Suspense>
              ) : null
            }
          </div>

          <div className="bottom-menu">
            <BottomMenu menu={menu} menuIndexes={menuIndexes} />
          </div>

        </Content>
      </Layout>
    </Layout>
  )
};

export default DashboardLayout