import {Suspense} from 'react';
import {BrowserRouter as Router,Route} from 'react-router-dom';
import {Layout,Menu,Switch,Icon} from 'antd';
import {MyFooter as Footer} from './footer.jsx';
import apple_svg from './image/Apple.svg';
import './sass/sider.scss';
import bg from './image/setting_bg.jpg';

import menu,{menuHtml,menuRoute} from './side-menu';
const {Header,Content,Sider} = Layout;
import {LoadSpin} from './load.jsx';



class SideDemo extends Component {
    state = {
        collapsed: false,
        logo: React.createRef(),
        show: true,
        path: document.location.pathname,
        content: menu.map(menuHtml),
        routes: menu.map(menuRoute),
    };

    onCollapse = collapsed => {
        console.log(collapsed);
        let logo = this.state.logo.current;
        if(collapsed){
            logo.innerHTML = `<img src=${apple_svg} />`;
            logo.classList.add('logo-small');
        } else {
            logo.innerHTML = "🍓🍒Zip的小窝🍑🍉";
            logo.classList.remove('logo-small');
        }
        this.setState({
            collapsed
        });
    }

    onHidden = show => {
        this.setState({
            show
        });
    }

    linkTo = item => {
        this.setState({
            path: document.location.pathname
        });
    }

    componentDidMount(){
        let routes = this.state.routes;
        let gauge = React.cloneElement(routes[0].shift(),{exact: true})
        routes[0].unshift(gauge)
        this.setState({
            routes
        });
    }

    render() {

        let content = this.state.content;
        let routes = this.state.routes;
        let sideStyle = {
            overflow: 'auto',
            height: '100vh',
            position: 'fixed',
            left: 0,
        };
        let headerStyle = {
            background: '#fff',
            padding: 0,
            display: this.state.show?'flex':'none'
        };
        let path = this.state.path;

        return (
            <Layout style={{ minHeight: '100vh' }}>
                <Router>
                <Sider style={sideStyle} collapsible
                    collapsed={this.state.collapsed} onCollapse={this.onCollapse}>
                  <div ref={this.state.logo} className="logo">🍓🍒Zip的小窝🍑🍉</div>
                  <Menu theme="dark" onClick={this.linkTo} mode="inline" defaultSelectedKeys={[path]}
                  selectedKeys={[path]} >
                  {content}
                  </Menu>
                </Sider>
                <Layout style={{ marginLeft: this.state.collapsed?80:200,height: 'fit-content' }}>
                  <Header className="dashboard-header" style={headerStyle}>
                      <div className="dashboard-header-title">
                           Zip的小窝后台管理
                      </div>
                      <Switch checkedChildren={<Icon type="check" />} 
                              unCheckedChildren={<Icon type="close" />} 
                      defaultChecked onClick={this.onHidden}/>
                  </Header>
                  <Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
                       <div className='dashboard-wrap-routes' style={{ padding: 24, background: '#fff', minHeight: 360 }}>
                           {!(/dashboard\//.test(document.location.pathname))?<img style={{maxHeight: '100%',maxWidth: '100%',height: '600px'}} src={bg}/>:null}
                           <Suspense fallback={<LoadSpin />}>{routes}</Suspense>
                       </div>
                  </Content>
                  <Footer />
                </Layout>
                </Router>
              </Layout>
        );
    }
}

export default SideDemo;