import React, { Component } from 'react';
import PropTypes from 'prop-types';
import * as ReactRouter from 'react-router';
import { createBrowserHistory, createHashHistory } from 'history';

export const MemoryRouter = ReactRouter.MemoryRouter;
export const Prompt = ReactRouter.Prompt;
export const Redirect = ReactRouter.Redirect;
export const Route = ReactRouter.Route;
export const StaticRouter = ReactRouter.StaticRouter;
export const Switch = ReactRouter.Switch;
export const matchPath = ReactRouter.matchPath;
export const withRouter = ReactRouter.withRouter;
export const Router = ({ children, browserHistory, ...props }) => {
    return <ReactRouter.Router {...props} history={browserHistory ? createBrowserHistory() : createHashHistory()}>
        <div>{children}</div>
    </ReactRouter.Router>
}
export const BrowserRouter = props => Router({ ...props, browserHistory: true });
export const HashRouter = props => Router({ ...props, browserHistory: false });
export const Link = class extends Component {
    constructor(props) {
        super(props);
    }
    static defaultProps = {
        replace: false
    }

    static contextTypes = {
        router: PropTypes.shape({
            history: PropTypes.shape({
                push: PropTypes.func.isRequired,
                replace: PropTypes.func.isRequired,
                createHref: PropTypes.func.isRequired
            }).isRequired
        }).isRequired
    }
    isModifiedEvent = e => {
        return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey)
    }
    onClick = e => {
        if (this.props.onClick)
            this.props.onClick(e)

        if (
            !e.defaultPrevented && // onClick prevented default
            e.button === 0 && // ignore right clicks
            !this.props.target && // let browser handle "target=_blank" etc.
            !this.isModifiedEvent(e) // ignore clicks with modifier keys
        ) {
            e.preventDefault();
            const { history } = this.context.router;
            const { replace, to } = this.props

            if (replace) {
                history.replace(to);
            } else {
                history.push(to);
            }
        }
    }
    render() {
        const { history } = this.context.router;
        const { to, replace, ...props } = this.props;
        const href = history.createHref(
            typeof to === 'string' ? { pathname: to } : to
        )
        return <a {...props} href={href} onClick={this.onClick} />
    }
}
export const NavLink = ({ to, exact, strict, activeClassName, className, activeStyle, style, isActive: fnIsActive, ...props }) => (
    <Route
        path={typeof to === 'object' ? to.pathname : to}
        exact={exact}
        strict={strict}
        children={({ location, match }) => {
            const isActive = !!(fnIsActive ? getIsActive(match, location) : match)
            return (
                <Link
                    to={to}
                    className={isActive ? [className, activeClassName].filter(i => i).join(' ') : className}
                    style={isActive ? { ...style, ...activeStyle } : style}
                    {...props}
                />
            )
        }}
    />
)