import React from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import {MemoryRouter as Router, Redirect, Route, Link} from 'react-router-dom'
import s from './styles.css'

const Home = () => (<div className={s.child}>Home</div>);
const About = () => (<div className={s.child}>About</div>);
const Config = () => (<div className={s.child}>Config</div>);

const AniRoute = ({component: Component, path, location}) => (
    <Route render={({location}) => (
        <ReactCSSTransitionGroup
            transitionEnterTimeout={500}
            transitionLeaveTimeout={200}
            transitionName={{
                enter: s.enter,
                enterActive: s.eactive,
                leave: s.leave,
                leaveActive: s.lactive,
            }}>
            <Route path={path} location={location}
                   key={location.key} component={Component} />
        </ReactCSSTransitionGroup>

    )} />
);

const Routes = () => (
    <Router>
        <div className={s.container}>
            <ul>
                <li><Link to="/home">Home</Link></li>
                <li><Link to="/about">About</Link></li>
                <li><Link to="/contact">Contact</Link></li>
            </ul>
            <AniRoute path="/" component={Home} />
            <AniRoute path="/home" component={Home} />
            <AniRoute path="/about" component={About} />
            <AniRoute path="/contact" component={Config} />
        </div>
    </Router>

);

export default Routes;