import * as React from 'react'
import { connect } from 'react-redux'
import { Link } from 'react-router-dom'
import { RouteComponentProps } from 'react-router'
import { getAuthProfile } from '@lml/cosmo-ui-auth'
import { Auth0UserProfile } from 'auth0-js'
import { AppState } from '../../../root/reducers'
import { getPaths, showFrequenciesSelectModal } from '@lml/core-ui'
import { AllocationNavbarItems } from './allocation-navbar-items'
import { IconAction } from './icon-action'
import { UserMenu } from './user-menu'
import {
    Row,
    Dropdown,
    DropdownItem,
    Icon,
    Image,
    StylableComponent,
    StylableComponentProps,
} from 'cosmoui'

const styles = require('./navbar.scss')
const logoImage = require('../../../../assets/cs-logo.png')

interface NavbarProps extends StylableComponentProps { }

interface NavbarComponentProps extends NavbarProps, RouteComponentProps<any> {
    paths: string[]
    profile: Auth0UserProfile
    showFrequenciesSelectModal: () => any
}

class NavbarComponent extends StylableComponent<NavbarComponentProps> {

    public render() {
        return (
            <Row align="center" className={styles.container}>
                <Image
                    height="40px"
                    width="40px"
                    size="contain"
                    position="left"
                    url={logoImage} />
                <div className={styles.itemDivider}>
                    <span className={styles.pageLabel}>
                        {this.props.paths[0]}
                    </span>
                    <Dropdown
                        closeOnClick
                        name="appSelect"
                        icon={<Icon icon="Down" size={22} fill={this.gray()} />}
                        className={styles.appSelect}>
                        {this.renderNavItem('/allocation', 'ALLOCATION')}
                        {this.renderNavItem('/admin', 'OPERATION ADMIN')}
                    </Dropdown>
                </div>
                {this.renderLeftContents()}
                {this.renderRightContents()}
            </Row>
        )
    }

    public renderLeftContents(): JSX.Element {
        const { paths } = this.props
        switch (paths[0]) {
            case 'allocation':
                return <AllocationNavbarItems path={paths[1]} />
            default:
                return null
        }
    }

    private renderRightContents() {
        const { profile } = this.props

        return (
            <Row className={styles.right} align="center">

                <div className={styles.itemDivider}>
                    <IconAction icon="Frequency" size={22} onClick={this.handleShowFrequenciesSelectModal} />
                </div>
                <div className={styles.itemDivider}>
                    {profile.name}
                    <UserMenu />
                </div>
                <img alt="" className={styles.avatar} src={profile.picture} />
            </Row>
        )
    }

    private renderNavItem(url: string, label: string): JSX.Element {
        return (
            <Link to={url} id={`navigation-dropdown-${url.replace('/', '')}`}>
                <DropdownItem>{label}</DropdownItem>
            </Link>
        )
    }

    private handleShowFrequenciesSelectModal = (e: React.SyntheticEvent<any>) => {
        const { showFrequenciesSelectModal } = this.props
        e.preventDefault()
        showFrequenciesSelectModal()
    }
}

const mapStateToProps = (state: AppState, ownProps: NavbarProps) => ({
    paths: getPaths(state),
    profile: getAuthProfile(state),
})

const mapActionsToProps = {
    showFrequenciesSelectModal,
}

// fuck my life - can't get these types working in the client
export const Navbar = connect(mapStateToProps, mapActionsToProps)(NavbarComponent)