import classNames from 'classnames'
import React from 'react'
import './Sidebar.css'

class Sidebar extends React.Component {
    state = {
        collapsed: false,
    }

    render() {
        const collapseButton = (
            <div
                className={classNames('sidebar-collapse-button', {
                    'sidebar-collapse-button-right': this.props.isRight,
                })}
                onClick={() => this.setState({ collapsed: !this.state.collapsed })}
            >
                {(this.state.collapsed && this.props.isRight) ||
                (!this.state.collapsed && !this.props.isRight) ? (
                    <span
                        className="fa fa-angle-left"
                        title={this.props.isRight ? 'Expand' : 'Collapse'}
                    />
                ) : (
                    <span
                        className="fa fa-angle-right"
                        title={this.props.isRight ? 'Collapse' : 'Expand'}
                    />
                )}
            </div>
        )

        if (this.state.collapsed) {
            return collapseButton
        }
        return (
            <div
                className={classNames('sidebar p-3 h-100', {
                    'sidebar-right': this.props.isRight,
                })}
                onWheel={e => e.stopPropagation()}
            >
                {this.props.children}
                {collapseButton}
            </div>
        )
    }
}

export default Sidebar