import React from 'react';
import {
    NavLink as Link
} from 'react-router-dom';

import {withTheme, injectSheet} from "../../lib/theme";
import StyleGrid from "../../lib/StyleGrid";

const styling = theme => ({
    li: {
        flexShrink: 0,
        [StyleGrid.smUp]: {
            width: '100%',
        },
    },
    link: {
        display: 'flex',
        position: 'relative',
        overflow: 'auto',
        padding: theme.gutter.base * 2 + 'px ' + theme.gutter.base * 3 + 'px',
        transition: '0.25s linear border-color, 0.15s linear background',
        borderBottom: '1px solid transparent',
        [StyleGrid.smUp]: {
            borderBottom: 0,
            height: '100%',
            width: '100%',
            borderLeft: '2px solid transparent',
            margin: '1px 0',
            padding: theme.gutter.base * 2 + 'px',
        },
        '&.active': {
            //cursor: 'default',
            borderBottom: '1px solid ' + theme.linkActive,
            [StyleGrid.smUp]: {
                borderBottom: 0,
                borderLeft: '2px solid ' + theme.linkActive
            },
        },
        '&:hover': {
            textDecoration: 'none',
            /*},
            '&:hover:not(.active)': {*/
            // todo: add convert hex to rgba util to theme for things like this
            background: 'rgba(13, 51, 73, 0.3)',
            borderBottom: '1px solid ' + theme.linkHover,
            [StyleGrid.smUp]: {
                borderBottom: 0,
                borderLeft: '2px solid ' + theme.linkHover
            },
        },
        '&:focus:not(.active)': {
            background: 'rgba(13, 51, 73, 0.1)',
        },
    },
    icon: {
        display: 'block',
        transition: '0.2s linear width, 0.2s linear height'
    },
    txt: {
        //maxWidth: '150px',
        lineHeight: '1.125rem',
        overflow: 'hidden',
        whiteSpace: 'nowrap',
        wordBreak: 'keep-all',
        paddingLeft: theme.gutter.base + 'px',
        transition: '0.4s linear max-width',
    },
    notxt: {
        maxWidth: '0',
        opacity: 0,
        //height: '0',
        lineHeight: '1.125rem',
        paddingLeft: 0,
        overflow: 'hidden',
        transition: '0.4s linear max-width, 0.4s linear opacity, 0.01s linear padding-left 0.4s',
    }
});

class NavItem extends React.Component {
    render() {
        const {route, classes, t} = this.props;

        let notxt = false;
        if(this.props.notxt) {
            notxt = this.props.notxt;
        }
        return (
            <li className={classes.li}>
                <Link to={route.path} className={classes.link}>
                    {route.lbl.icon ? <route.lbl.icon className={classes.icon} notxt={notxt}/> : (notxt ? ' • ' : null)}
                    <span className={classes.txt + ' ' + (notxt ? classes.notxt : '')}>{t(route.lbl.txt)}</span>
                </Link>
            </li>
        )
    };
}

export default withTheme(injectSheet(styling)(NavItem));