/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/href-no-hash */
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';

import './column.scss';

class Sidebar extends PureComponent {
  static propTypes = {
    /** @ignore */
    className: PropTypes.string,
    fixed: PropTypes.bool,
    left: PropTypes.bool,
    right: PropTypes.bool,
    name: PropTypes.string,
    backdropClassName: PropTypes.string
  };

  static defaultProps = {
    className: undefined,
    fixed: false,
    left: false,
    right: false,
    name: 'Menu',
    backdropClassName: undefined
  };

  static contextTypes = {
    layout: PropTypes.object
  };

  state = {
    collapsed: true
  };

  componentWillMount = () => {
    const { fixed, left, right } = this.props;
    if (left && right) {
      throw new Error('A Column can\'t be both left and right');
    }
    if (this.context.layout) {
      this.context.layout.register(left ? 'columnLeft' : 'columnRight', { fixed });
    }
  };

  toggleColumn = e => {
    e.preventDefault();
    this.setState({ collapsed: !this.state.collapsed });
  };

  render() {
    const { className, backdropClassName, fixed, left, right, name, ...props } = this.props;
    const columnStyle = [];
    const backdropStyle = ['backdrop'];
    const toggleStyle = ['toggle'];
    let baseStyle = fixed ? 'fixed-' : 'fluid-';
    baseStyle += left ? 'left' : 'right';
    columnStyle.push(baseStyle);

    if (fixed && !this.state.collapsed) {
      toggleStyle.push('toggle-active');
      backdropStyle.push('backdrop-open');
      columnStyle.push('open');
    }

    return (
      <div className={backdropClassName} styleName={backdropStyle.join(' ')} onClick={this.toggleColumn}>
        {fixed &&
          <a href="#" onClick={this.toggleColumn} styleName={toggleStyle.join(' ')}>
            <span styleName="toggle-inner">{name}</span>
          </a>
        }
        <aside className={className} styleName={columnStyle.join(' ')} {...props} onClick={e => e.stopPropagation()} />
      </div>
    );
  }
}

export default Sidebar;
