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

const styling = theme => ({
    wrapper: {
        display: 'flex',
        flexDirection: 'row',
        height: 'auto',
        width: '100%',
        marginLeft: '0',
        [StyleGrid.smUp]: {
            overflow: 'auto',
            width: 'auto',
            padding: '0 ' + 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',
            width: '100%'
        },
        '& a': {}
    },
    logo: {
        height: '48px',
        width: '48px'
    },
    notxtToggle: {
        marginLeft: 0,
        display: 'inline',
        //width: '20px',
        [StyleGrid.smUp]: {
            width: '16px',
            margin: theme.gutter.base * 2 + 'px',
        },
    },
    notxtToggleIcon: {
        [StyleGrid.jss.smUp]: {},
    }
});

class Sidebar extends React.Component {

    state = {
        notxt: false
    };

    componentDidMount() {
        this.setState({
            notxt: this.isNoTxt()
        })
    }

    isNoTxt() {
        let notxt = window.localStorage.getItem('notxt');
        if(null !== notxt && '' !== notxt.trim()) {
            // type conversion to boolean
            // eslint-disable-next-line
            return (notxt == 'true');
        }
        return this.state.notxt;
    }

    toggleNoTxt() {
        window.localStorage.setItem('notxt', (!this.state.notxt).toString());
        this.setState({
            notxt: !this.state.notxt
        });
    }

    render() {
        const {classes, center: Center, theme, textToggle} = this.props;

        return (
            <div className={classes.wrapper}>
                <Center notxt={this.state.notxt}/>
                {textToggle ?
                    <button className={classes.notxtToggle}
                            onClick={this.toggleNoTxt.bind(this)}>
                        <MdEject color={theme.textColor}
                                 size={16}
                                 style={Object.assign(styling(theme).notxtToggleIcon, {transform: 'rotate(' + (this.state.notxt ? '' : '-') + '90deg)', transition: '0.3s linear transform'})}/>
                    </button>
                    : null}
            </div>
        );
    }
}

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