import * as React from 'react'
import { Switch, Route, RouteComponentProps } from 'react-router'
import { Redirect } from '../../../root/components'
import { Link } from 'react-router-dom'
import { ADMIN_SIDEBAR_LINKS } from '../../data'
import { Sidebar } from '@lml/core-ui'
import { JobByJobNumber, JobsByStatus } from '@lml/core-ui'
import { InviteUserForm } from '@lml/core-ui'
import { PlacesByPartner } from '@lml/core-ui'
import { CourierById } from '@lml/core-ui'
import { ManageJobLabels } from '@lml/core-ui'
import { includes } from 'lodash'
import {
    Column,
    Row,
    Paper,
    StylableComponent,
    StylableComponentProps,
    Icon,
    Text,
} from 'cosmoui'
import { isSuperuser, RequireRole, requireRole } from '@lml/cosmo-ui-auth'
import { connect } from 'react-redux'
import { AppState } from '../../reducers'

const styles = require('./admin.scss')

interface AdminProps extends StylableComponentProps, RouteComponentProps<any> { }

interface AdminComponentProps extends AdminProps {
    isSuperuser: boolean
}

class AdminComponent extends StylableComponent<AdminComponentProps> {

    public render() {
        // annoying bug with the withRouter HOC here
        // the Sidebar component is expecting all the props
        // like match, location etc
        const props: any = { links: ADMIN_SIDEBAR_LINKS }
        return (
            <Row fullWidth fullHeight align="flex-start" className={styles.container}>
                <Sidebar {...props} />
                {this.renderPage()}
            </Row>
        )
    }

    private renderPage = () =>
        <Column fullWidth fullHeight className={styles.page}>
            <Switch>
                <Route path={this.prefixed('users/invite')}
                    component={requireRole(InviteUserForm, { roles: ['superuser'] })} />
                <Route path={this.prefixed('jobs/number')} component={JobByJobNumber} />
                <Route path={this.prefixed('jobs/date')} component={JobsByStatus} />
                <Route path={this.prefixed('places')} component={PlacesByPartner} />
                <Route path={this.prefixed('couriers/id')} component={CourierById} />
                <Route path={this.prefixed('labels')} component={ManageJobLabels} />
                <Route
                    path={this.prefixed('')}
                    component={this.redirect(this.prefixed('jobs/number'))} />
            </Switch>
        </Column>

    private prefixed = (path: string) => `${this.props.match.path}/${path}`

    private redirect(path: string) {
        return () => <Redirect to={path} />
    }

}

const mapStateToProps = (state: AppState) => ({
    isSuperuser: isSuperuser(state),
})

const mapActionsToProps = {}

export const Admin = connect(mapStateToProps, mapActionsToProps)(AdminComponent)