import * as React from 'react'
import { withRouter, RouteComponentProps } from 'react-router'
import { connect } from 'react-redux'
import { AppState } from '../../reducers'
import { getJobsCount, canPageBack } from '@lml/core-ui'
import { Row, Text } from 'cosmoui'
import { config } from '../../../config'

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

interface FooterProps extends RouteComponentProps<any> { }

interface FooterComponentProps extends FooterProps {
    jobCount: number
    debugOn: boolean
    canPageBack: boolean
}

export class FooterComponent extends React.Component<FooterComponentProps, {}> {

    public renderJobCount() {
        const { jobCount, canPageBack } = this.props

        return (
            <div id="footer-job-count" className={styles.item}>
                Job count: {jobCount >= 50 || canPageBack ? '50+' : jobCount}
            </div>
        )
    }

    public render() {
        return (
            <Row className={styles.container}>
                {this.renderJobCount()}
                <div id="footer-version" className={styles.item}>Version: {config.APP_VERSION}</div>
                <a id="footer-contact" className={styles.right} href={`mailto:${config.SUPPORT_EMAIL}`}>Contact support</a>
            </Row>
        )
    }
}

const parsePath = (ownProps: any) =>
    ownProps.match ? ownProps.match.path.replace('/', '') : 'live'

const mapStateToProps = (state: AppState, ownProps: any) => ({
    canPageBack: canPageBack(state),
    jobCount: getJobsCount(state),
})

const mapActionsToProps = {}

export const Footer = withRouter(connect(mapStateToProps, mapActionsToProps)(FooterComponent))