import React from 'react';
import ReactDOM from 'react-dom';
import {
    BrowserRouter,
    Route,
    Link,
    NavLink,
    Switch,
    Redirect
} from 'react-router-dom';
import uuid from 'uuid';

import './index.css';

import {
    TransitionGroup,
    CSSTransition
} from 'react-transition-group';

import 'animate.css';

const stuData = {
    stuList:[
        {id:uuid(), name:'张三', sex:'男', tel:'15678904397'},
        {id:uuid(), name:'李四', sex:'男', tel:'1567454397'},
        {id:uuid(), name:'王五', sex:'女', tel:'13478904397'},
        {id:uuid(), name:'王博', sex:'男', tel:'18678904397'},
        {id:uuid(), name:'丁一宁', sex:'女', tel:'18778904397'},
        {id:uuid(), name:'武宁', sex:'女', tel:'456543343'},
        {id:uuid(), name:'汪洋', sex:'女', tel:'12313213132'}
    ]
}

const Home = () =>(
    <div>
        <h3>我是主页</h3>
    </div>
);
const About = () =>(
    <div>
        <h3>关于我们</h3>
    </div>
);

/* const StuInfo = (props) =>{ //展示学生详情
    let {id} = props.match.params;
    let stuInfo = stuData.stuList.find((item)=>{
        return item.id === id;
    });

    if(!stuInfo){
        props.history.push('/stu');
        return null;
    }
    return (<div>
        <p>学生编号: {stuInfo.id}</p>
        <p>学生名字: {stuInfo.name}</p>
        <p>学生性别: {stuInfo.sex}</p>
        <p>学生电话: {stuInfo.tel}</p>
    </div>)
} */
class StuInfo extends React.Component{
    goBack = () =>{
        this.props.history.goBack();
    }
    render(){
        //console.log(this.props.history);
        let {id} = this.props.match.params;
        let stuInfo = stuData.stuList.find((item)=>{
            return item.id === id;
        });

        if(!stuInfo){
            this.props.history.push('/stu');
            return null;
        }
        return (<div>
            <p>学生编号: {stuInfo.id}</p>
            <p>学生名字: {stuInfo.name}</p>
            <p>学生性别: {stuInfo.sex}</p>
            <p>学生电话: {stuInfo.tel}</p>
            <p>
                <button onClick={this.goBack}>返回</button>
            </p>
        </div>)
    }
}

const StuMain = () => (
    <ul>
        {
            stuData.stuList.map((item,index)=>
                <li key={item.id}>
                    <Link to={`/stu/${item.id}`}>{item.name}</Link>
                </li>
            )
        }
    </ul>
);

const Stu = () =>(
    <div>
        <Switch>
            <Route exact path="/stu" component={StuMain}></Route>
            <Route path="/stu/:id" component={StuInfo}></Route>
        </Switch>
    </div>
)

const NotFound = () =>(
    <div>
        <h3>404</h3>
    </div>
)


const Main = () =>(
    <div>
        <TransitionGroup>
            <CSSTransition
                key={Math.random()}
                timeout={{
                    enter:500,
                    exit:0
                }}
                classNames={{
                    enter:'animated',
                    enterActive:'tada',
                    exit:'animated',
                    exitActive:'fadeOut'
                }}
            >
                <Switch>
                    <Route path="/home" component={Home} />
                    <Route path="/about" component={About} />
                    <Route path="/stu" component={Stu} />
                    <Redirect exact from='/' to="/home" />
                    <Route component={NotFound} />
                </Switch>
            </CSSTransition>
        </TransitionGroup>
        
    </div>
);

const Header = () =>(
    <ul>
        <li><NavLink to="/home" activeClassName="active">主页</NavLink></li>
        <li><NavLink to="/about" activeClassName="active">关于我们</NavLink></li>
        <li><NavLink to="/stu" activeClassName="active">学生名单</NavLink></li>
    </ul>
)

class App extends React.Component{
    render(){
        return (<div style={{
            width:'500px',
            margin:'0 auto'
        }}>
            <Header></Header>
            <Main></Main>
        </div>)
    }
}

ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>
    , document.getElementById('root'));