import React from 'react';
import { Route, Redirect } from 'react-router';
import { isAuthenticated, hasRole } from '@services/auth';
// import { getState } from '@lib/redux/store';
import stateMapper from '@modules/state-mapper';




export interface RouteProps {
	path: string,
	component: any,
	authErrorMessage?: { title: string, description: string },
	exact?: boolean
}

// const userState = getState()['userState'];

export const PrivateRoute = stateMapper(({ userState, path, component, authErrorMessage, exact }: RouteProps) => {
	if (isAuthenticated()) return <Route exact={exact} path={path} component={component} />;
	else return <Redirect to={{
		pathname: '/login',
		state: {
			rdr: {
				path: path,
				message: authErrorMessage ?? {
					title: 'Forgot to login?',
					description: 'It looks like you\'re not logged in. You need to login first!'
				}
			}
		}
	}} />;
}, {});


export const DevRoute = stateMapper(({ userState, path, component, authErrorMessage, exact }: RouteProps) => {
	if (isAuthenticated()) return (
		hasRole(userState, 'Developer')
			? <Route exact={exact} path={path} component={component} />
			: <Redirect to={{
				pathname: '/login',
				state: {
					rdr: {
						path: path,
						message: authErrorMessage ?? {
							title: 'Forgot to login?',
							description: 'It looks like you\'re not logged in. You need to login first!'
						}
					}
				}
			}} />
	);
	else return <Redirect to={{
		pathname: '/login',
		state: {
			rdr: {
				path: path,
				message: authErrorMessage ?? {
					title: 'Forgot to login?',
					description: 'It looks like you\'re not logged in. You need to login first!'
				}
			}
		}
	}} />;
}, {});



export const AdminRoute = stateMapper(({ userState, path, component, authErrorMessage, exact }: RouteProps) => {
	if (isAuthenticated()) return (
		hasRole(userState, 'Administrator')
			? <Route exact={exact} path={path} component={component} />
			: <Redirect to={{
				pathname: '/login',
				state: {
					rdr: {
						path: path,
						message: authErrorMessage ?? {
							title: 'Forgot to login?',
							description: 'It looks like you\'re not logged in. You need to login first!'
						}
					}
				}
			}} />
	);
	else return <Redirect to={{
		pathname: '/login',
		state: {
			rdr: {
				path: path,
				message: authErrorMessage ?? {
					title: 'Forgot to login?',
					description: 'It looks like you\'re not logged in. You need to login first!'
				}
			}
		}
	}} />;
}, {});



export const ModRoute = stateMapper(({ userState, path, component, authErrorMessage, exact }: RouteProps) => {
	if (isAuthenticated()) return (
		hasRole(userState, 'Moderator') || hasRole(userState, 'Administrator')
			? <Route exact={exact} path={path} component={component} />
			: <Redirect to={{
				pathname: '/login',
				state: {
					rdr: {
						path: path,
						message: authErrorMessage ?? {
							title: 'Forgot to login?',
							description: 'It looks like you\'re not logged in. You need to login first!'
						}
					}
				}
			}} />
	);
	else return <Redirect to={{
		pathname: '/login',
		state: {
			rdr: {
				path: path,
				message: authErrorMessage ?? {
					title: 'Forgot to login?',
					description: 'It looks like you\'re not logged in. You need to login first!'
				}
			}
		}
	}} />;
}, {});



export const CCRoute = stateMapper(({ userState, path, component, authErrorMessage, exact }: RouteProps) => {
	if (isAuthenticated()) return (
		hasRole(userState, 'Content Creator') || hasRole(userState, 'Moderator') || hasRole(userState, 'Administrator')
			? <Route exact={exact} path={path} component={component} />
			: <Redirect to={{
				pathname: '/login',
				state: {
					rdr: {
						path: path,
						message: authErrorMessage ?? {
							title: 'Forgot to login?',
							description: 'It looks like you\'re not logged in. You need to login first!'
						}
					}
				}
			}} />
	);
	else return <Redirect to={{
		pathname: '/login',
		state: {
			rdr: {
				path: path,
				message: authErrorMessage ?? {
					title: 'Forgot to login?',
					description: 'It looks like you\'re not logged in. You need to login first!'
				}
			}
		}
	}} />;
}, {});
