/**
 * @file 网站入口
 * @author dongtiancheng
 */

// 引擎入口在 ./render/index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './site/App';
import './index.css';
import 'highlight.js/styles/xcode.css';
import {BrowserRouter, Redirect, Route, NavLink} from 'react-router-dom';
import {Layout, Menu, Icon} from '@native-ads/antd';
const {
    Header,
    Footer,
    Content
} = Layout;
const Item = Menu.Item;

const IndexRoute = () => {
    return <Redirect to={'/basicGuide/HelloWorld'}/>;
};

let key = 'basicGuide';
const match = location.pathname.match(/\/(.*?)\//);
if (match) {
    key = match[1];
}

const Index = (
    <BrowserRouter>
        <Layout>
            <Header className="header">
                <div className="logo">RCRE</div>
                <Menu
                    theme="dark"
                    mode="horizontal"
                    style={{lineHeight: '64px'}}
                    defaultSelectedKeys={[key]}
                >
                    <Item key="basicGuide">
                        <NavLink to={'/basicGuide/HelloWorld'}>
                            基础教程
                        </NavLink>
                    </Item>
                    <Item key="advancedGuide">
                        <NavLink to={'/advancedGuide/basicContainer'}>
                            高级教程
                        </NavLink>
                    </Item>
                    <Item key="component">
                        <NavLink to={'/component/button'}>
                            组件
                        </NavLink>
                    </Item>
                    <Item key="demo">
                        <NavLink to={'/demo/crossContainer'}>
                            最佳实践
                        </NavLink>
                    </Item>
                    <Item key="5">
                        <a href="http://10.94.81.108:8080/index-cn">配套组件库</a>
                    </Item>
                </Menu>
            </Header>
            <Content style={{padding: '0 50px'}}>
                <Route path="/:group/:activeKey" component={App}/>
                <Route path="/" strict={true} exact={true} component={IndexRoute}/>
                <Icon className="rcre-feedback" type="message" onClick={() => window.loadRightBar()} />
            </Content>
            <Footer style={{textAlign: 'center'}}>
                RCRE ©2017 Created by dongtiancheng@baidu.com
            </Footer>
        </Layout>
    </BrowserRouter>
);

ReactDOM.render(
    Index,
    document.getElementById('root') as HTMLElement
);