import React, { useEffect, useState } from 'react';
import { HomeHoc }  from '../HOC/HomeHoc';
import {Route, Switch , Link } from 'react-router-dom';
import Loadable from 'react-loadable';
import Loading from '../../Loading';
import { Box , Long , Short , Gap } from '../../forge/Component/layout';
import './Index.scss';
import { Menu } from 'antd';

const Preface = Loadable({
  loader: () => import('./Preface'),
  loading: Loading,
})
const PSL = Loadable({
  loader: () => import('./PSL'),
  loading: Loading,
})
const Public = Loadable({
  loader: () => import('./Public'),
  loading: Loading,
})
const FAQ = Loadable({
  loader: () => import('./FAQ'),
  loading: Loading,
})
function Index(props){
  const [ nav , setNav ] = useState("0");

  const pathname = props.history.location.pathname;
  useEffect(()=>{
    if(pathname){
      if(pathname === `/license/preface`){
        setNav("0");
      }
      if(pathname === `/license/psl/mulanpsl-v1`){
        setNav("1");
      }
      if(pathname === `/license/psl/mulanpsl-v2`){
        setNav("2");
      }
      if(pathname === `/license/public/MulanPubL-V1`){
        setNav("3");
      }
      if(pathname === `/license/faq`){
        setNav("4");
      }
    }
  },[pathname])
  return(
    <div className="panelsBox">
      <Box>
        <Short>
          <Menu selectedKeys={[nav]} mode="inline" className="menus" defaultOpenKeys={["2_1"]}>
            <Menu.Item key="0"><Link to={`/license/preface`}>引言</Link></Menu.Item>
            <Menu.SubMenu key="2_1" title={"木兰宽松许可证"}>
              <Menu.Item key="1"><Link to={`/license/psl/mulanpsl-v1`}>第一版</Link></Menu.Item>
              <Menu.Item key="2"><Link to={`/license/psl/mulanpsl-v2`}>第二版</Link></Menu.Item>
            </Menu.SubMenu>
            <Menu.Item key="3"><Link to={`/license/public/MulanPubL-V1`}>木兰公共许可证</Link></Menu.Item>
            <Menu.Item key="4"><Link to={`/license/faq`}>常见问题</Link></Menu.Item>
          </Menu>
        </Short>
        <Long>
          <Gap>
            <div className="boxshadow">
              <Switch {...props}>
                <Route
                  path="/license/preface"
                  render={(p) => (
                    <Preface {...props} {...p} />
                  )}
                ></Route>
                <Route
                  path="/license/psl/:id"
                  render={(p) => (
                    <PSL {...props} {...p} />
                  )}
                ></Route>
                <Route
                  path="/license/public/:id"
                  render={(p) => (
                    <Public {...props} {...p} />
                  )}
                ></Route>
                <Route
                  path="/license/faq"
                  render={(p) => (
                    <FAQ {...props} {...p} />
                  )}
                ></Route>
              </Switch>
            </div>
          </Gap>
        </Long>
      </Box>
    </div>
  )
}
export default HomeHoc(Index);