/// <reference path="../global.d.ts" />

import * as React from 'react';
import {Layout, Menu} from '@native-ads/antd';
import './App.css';
import {NavLink, RouteComponentProps} from 'react-router-dom';
import {ComponentPreview} from './preview/ComponentPreview';
import {GuidePreview} from './preview/GuidePreview';
import guideList from '../guide/index';
import docList from '../components/doc';
import demoList from '../demo/index';
import * as _ from 'lodash';

const {
    Sider,
    Content
} = Layout;

const Item = Menu.Item;

export interface AppStateInterface {
    activeMenu: string;
    activeKey: string;
}

export interface AppProps {
    activeKey: string;
    group: string;
}

class App extends React.Component<RouteComponentProps<AppProps>, AppStateInterface> {
    constructor(props: RouteComponentProps<AppProps>) {
        super(props);

        this.state = {
            activeMenu: '',
            activeKey: 'HelloWorld'
        };
    }

    render() {
        let match = this.props.match;
        let params = match.params;
        let activeKey = params.activeKey || 'HelloWorld';
        let group = params.group;

        let content = <div/>;
        let menu = <div/>;
        // 文档渲染
        if (group === 'basicGuide') {
            // 基础教程
            let html = guideList['basicGuide'][activeKey];

            if (!html) {
                console.error('invalid activeKey');
                return <div/>;
            }

            let markdown = html.md;
            content = <GuidePreview md={markdown}/>;
            menu = (
                <Menu
                    mode="inline"
                    selectedKeys={[activeKey]}
                    style={{height: '100%'}}
                >
                    {
                        _.map(guideList['basicGuide'], (info, name) => {
                            return <Item key={name}>
                                <NavLink to={`/basicGuide/${name}`}>
                                    {info.title}
                                </NavLink>
                            </Item>;
                        })
                    }
                </Menu>
            );
        } else if (group === 'advancedGuide') {
            // 高级教程
            let html = guideList['advancedGuide'][activeKey];

            if (!html) {
                console.error('invalid activeKey');
                return <div/>;
            }

            let markdown = html.md;

            content = <GuidePreview md={markdown}/>;
            menu = (
                <Menu
                    mode="inline"
                    selectedKeys={[activeKey]}
                    style={{height: '100%'}}
                >
                    {
                        _.map(guideList['advancedGuide'], (info, name) => {
                            return <Item key={name}>
                                <NavLink to={`/advancedGuide/${name}`}>
                                    {info.title}
                                </NavLink>
                            </Item>;
                        })
                    }
                </Menu>
            );
        } else if (group === 'component') {
            // 组件渲染
            content = <ComponentPreview map={docList} activeKey={activeKey}/>;
            menu = (
                <Menu
                    mode="inline"
                    selectedKeys={[activeKey]}
                    style={{height: '100%'}}
                >
                    {
                        _.map(docList, (info, name) => {
                            return <Item key={name}>
                                <NavLink to={`/component/${name}`}>
                                    {name.substring(0, 1).toUpperCase() + name.substring(1)}
                                </NavLink>
                            </Item>;
                        })
                    }
                </Menu>
            );
        } else if (group === 'demo') {
            // 样例渲染
            let html = demoList[activeKey];

            if (!html) {
                console.error('invalid activeKey');
                return <div/>;
            }
            content = <GuidePreview md={html.md}/>;
            menu = (
                <Menu
                    mode="inline"
                    selectedKeys={[activeKey]}
                    style={{height: '100%'}}
                >
                    {
                        _.map(demoList, (info, name) => {
                            return <Item key={name}>
                                <NavLink to={`/demo/${name}`}>
                                    {info.title}
                                </NavLink>
                            </Item>;
                        })
                    }
                </Menu>
            );
        }
        return (
            <Layout style={{padding: '24px 0', background: '#fff'}}>
                <Sider width={190} style={{background: '#fff'}}>
                    {menu}
                </Sider>
                <Content style={{padding: '0 40px', minHeight: 280}}>
                    {content}
                </Content>
            </Layout>
        );

    }
}

export default App;