import React from 'react';
import {withTheme, injectSheet} from '../../lib/theme';
import StyleGrid from '../../lib/StyleGrid';
import {MdEject} from 'react-icons/md';
import {withSidebars} from "../../component/Sidebars";

const styling = theme => ({
    wrapper: {
        display: 'flex',
        flexDirection: 'row',
        height: 'auto',
        width: '100%',
        marginLeft: '0',
        background: 'rgba(50, 50, 50, 0.3)',
        '&:nth-child(2)': {
            background: 'rgba(50, 50, 50, 0.2)',
        },
        '&:nth-child(3)': {
            background: 'rgba(50, 50, 50, 0.1)',
        },
        '&:nth-child(4)': {
            background: 'rgba(50, 50, 50, 0.1)',
            borderLeft: '1px solid rgba(50, 50, 50, 0.3)',
        },
        '&:nth-child(5)': {
            background: 'rgba(50, 50, 50, 0.1)',
            borderLeft: '1px solid rgba(50, 50, 50, 0.3)',
        },
        '&:nth-child(6)': {
            background: 'rgba(50, 50, 50, 0.1)',
            borderLeft: '1px solid rgba(50, 50, 50, 0.3)',
        },
        '&:nth-child(7)': {
            background: 'rgba(50, 50, 50, 0.1)',
            borderLeft: '1px solid rgba(50, 50, 50, 0.3)',
        },
        [StyleGrid.smUp]: {
            overflow: 'auto',
            width: 'auto',
            padding: theme.gutter.base * 2 + 'px',
            flexDirection: 'column',
        },
        '& ul': {
            display: 'flex',
            flexDirection: 'row',
            overflow: 'auto',
            height: '100%',
            margin: 0,
            [StyleGrid.smUp]: {
                flexDirection: 'column',
            },
        },
        '& li': {
            listStyleType: 'none',
            display: 'block',
        },
        '& a': {}
    },
    logo: {
        height: '48px',
        width: '48px'
    },
    notxtToggle: {
        marginLeft: 0,
        display: 'inline',
        width: '1.875em',
        flexGrow: 2,
        textAlign: 'left',
        [StyleGrid.smUp]: {
            width: '16px',
            margin: theme.gutter.base * 3 + 'px',
        },
    },
    notxtToggleIcon: {
        [StyleGrid.jss.smUp]: {},
    }
});

class Sidebar extends React.Component {

    render() {
        const {
            classes, theme,
            top: Top,
            center: CenterContent,
            textToggle,
            noText, toggleNoText
        } = this.props;

        return (
            <div className={classes.wrapper}>
                {Top ? <Top notxt={noText}/> : null}

                <CenterContent notxt={noText}/>

                {textToggle ?
                    <button className={classes.notxtToggle}
                            onClick={toggleNoText}>
                        <MdEject color={theme.textColor}
                                 size={noText ? '1.25em' : '1em'}
                                 style={Object.assign(styling(theme).notxtToggleIcon, {transform: 'rotate(' + (noText ? '' : '-') + '90deg)', transition: '0.3s linear transform'})}/>
                    </button>
                    : null}
            </div>
        );
    }
}

export default withSidebars(injectSheet(styling)(withTheme(Sidebar)));
