import * as React from 'react'
import { CADPanel, KeyboardShortcuts } from '@lml/core-ui'
import { Switch, Route, RouteComponentProps } from 'react-router'
import { Redirect } from '../redirect'
import { Live, Allocated, Accepted, Progress, Completed, Consolidations } from '@lml/core-ui'
import { Footer } from '../footer'
import { Column } from 'cosmoui'

interface AllocationProps extends RouteComponentProps<any> { }

export class Allocation extends React.Component<AllocationProps, {}> {

    public render() {
        // console.log('RENDER ALLOCATION PAGE', Live)
        const prefixed = (path: string) => `${this.props.match.path}/${path}`
        return (
            <Column style={{ height: '100%' }}>
                <CADPanel>
                    <KeyboardShortcuts />
                    <Switch>
                        <Route path={prefixed('live')} component={Live} />
                        <Route path={prefixed('allocated')} component={Allocated} />
                        <Route path={prefixed('accepted')} component={Accepted} />
                        <Route path={prefixed('progress')} component={Progress} />
                        <Route path={prefixed('completed')} component={Completed} />
                        <Route path={prefixed('consolidations')} component={Consolidations} />
                        <Route path={prefixed('')} component={this.redirect(prefixed('live'))} />
                    </Switch>
                </CADPanel>
                <Footer />
            </Column>
        )
    }

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