import * as React from 'react'
import { NavItem } from '@lml/core-ui'
import { withRouter, RouteComponentProps } from 'react-router'
import { Row } from 'cosmoui'

/**
 * TODO - withRouter does not appear to be passing the child route in here
 * This means we need to change tha applicaton structure to put all the routes at the
 * very start of the app container - this will give the navbar access to the routes
 * For now i've hacked this problem by going outside of withRouter and using the router state
 *
 * @param name
 */
interface AllocationNavbarItemsProps extends RouteComponentProps<any> {
    path: string
}

class AllocationNavbarItemsComponent extends React.Component<AllocationNavbarItemsProps, {}> {
    public render() {
        return (
            <Row>
                <NavItem to="live" isActive={this.itemIsActive('live')}>LIVE</NavItem>
                <NavItem to="allocated" isActive={this.itemIsActive('allocated')}>ALLOCATED</NavItem>
                <NavItem to="accepted" isActive={this.itemIsActive('accepted')}>ACCEPTED</NavItem>
                <NavItem to="progress" isActive={this.itemIsActive('progress')}>IN PROGRESS</NavItem>
                <NavItem to="completed" isActive={this.itemIsActive('completed')}>COMPLETED</NavItem>
                <NavItem to="consolidations" isActive={this.itemIsActive('consolidations')}>JOB RUNS</NavItem>
            </Row>
        )
    }

    public itemIsActive(path: string): boolean {
        return this.props.path === path
    }
}

export const AllocationNavbarItems: any = withRouter(AllocationNavbarItemsComponent)