import React, { Component } from 'react';
import Button from 'mpui/components/button';
import Icon from 'mpui/components/icon';
import { FlexBox } from 'mpui/components/grid';
import lazyLoad from 'webpack-kit/lazyLoad';
import LazilyLoad, { lazilyLoadWrapper } from 'react-kit/lazilyLoad';
import Test4 from './test4';
import './style.css';
import { BrowserRouter, HashRouter, withRouter, Router, Route, IndexRoute, NavLink } from 'react-kit/webRouter';
import { connectRoutes, connect } from 'react-kit/redux';
import { imShallowEqual } from 'react-kit/utils';
// 怎么让他动态加载呢
//lazyLoad(require('bundle-loader?lazy&name=2!./test2'), mod => mod.default).then(mul => { console.log(mul); console.log(mul(5, 6)) }).catch(e => console.log(e));

const k = lazilyLoadWrapper()

const KK = () => {
    console.log('KKKKKKKKKK');
    return <div>{Date.now()}</div>
}

const TestDiv = connect(state => {
    console.log('****************');
    return { pathname: state['router-hash'].location.pathname }
})(({ pathname }) => {
    return <div className="testDiv">{pathname}</div>
});
const BrowserRouterTest = withRouter(class extends Component {
    state = {
        children: null
    }
    componentWillReceiveProps(nextProps) {
        console.log('nextProps*****************');
    }
    shouldComponentUpdate(nextProps, nextState) {
        return true;
        console.log(this.props);
        console.log(nextProps);
        console.log(imShallowEqual(this.props, nextProps));
        return !imShallowEqual(this.props, nextProps);
    }
    componentWillMount() {
        console.log('yuyyyy');
        this.setState({
            children: connectRoutes('browser', <div>
                <NavLink to={{ pathname: '/test3/123456789', hash: '/test3/00000', state: { uid: '123456789' } }} activeStyle={{ color: 'red' }} exact>TEST2</NavLink>
                <Route path='/test1' exact render={({ match, location, history }) => {
                    return <Button type='primary' onClick={() => console.log('btn click')} icon="home" >测试按钮</Button>
                }} />
                <Route path='/test2/' component={({ match, location, history }) => {
                    return <LazilyLoad modules={{
                        Test3: () => ({ loader: require('bundle-loader?lazy&name=test3!./test3'), destructor: mod => mod.K })
                    }}>
                        {({ Test3 }) => { return <Test3 /> }}
                    </LazilyLoad>
                }} />
                <Route path='/test3/:id' exact children={({ match, location, history }) => {
                    if (match) {
                        return <Test4 data-uid={match.params.id} data-psw='13800138000' data-phone='18603815544' className='test4-class' />
                    } else {
                        return <div>route 3 not match</div>;
                    }
                }} />
            </div>)
        })
    }
    render() {
        console.log('render router test');
        return this.state.children;
    }
});
const KKKK = () => {
    return <BrowserRouterTest />
}
export default () => {
    return <FlexBox justify='space-around'>
        {connectRoutes('hash', <div>
            <FlexBox span={16} block>
                <TestDiv />
            </FlexBox>

            <div>
                <a href="/test3/byhchenly#/test3/000000">New Link Test</a>
                <NavLink replace to={{ pathname: '/test3/byhchenly', state: { uid: 'byhchenly' } }} activeStyle={{ color: 'red' }} exact>TEST2</NavLink>
                <Route path="/test1" exact render={({ match, location, history }) => {
                    return <Button type='primary' onClick={() => console.log('btn click')} icon="home" >测试按钮</Button>
                }} />
                <Route path='/test2/' component={({ match, location, history }) => {
                    return <LazilyLoad modules={{
                        Test3: () => ({ loader: require('bundle-loader?lazy&name=test3!./test3'), destructor: mod => mod.K })
                    }}>
                        {({ Test3 }) => { return <Test3 /> }}
                    </LazilyLoad>
                }} />
                <Test4 data-uid={'123'} data-psw='13800138000' data-phone='18603815544' className='test4-class' />
                {/*
                    <Route path='/test3/:id' exact children={({ match, location, history }) => {
                        console.log({ browserLocation: location })
                        if (match) {
                            return <Test4 data-uid={match.params.id} data-psw='13800138000' data-phone='18603815544' className='test4-class' />
                        } else {
                            return <div>route 3 not match</div>;
                        }
                    }} />*/}
                <KK />
                <KKKK />
            </div>
            } />
        </div>)}
    </FlexBox>
}