/**
 * Created by baoyinghai on 4/19/17.
 */
import React from 'react';
import { iconWrapper } from '../../../utils/IconHelper';

export default class SideMenuBarContainer extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      status: true // true -> open, false -> close
    };
  }

  _switchSideMenu = () => {
    this.setState({ status: !this.state.status }, () => {
      const { changeHander } = this.props;
      changeHander && changeHander(this.state.status);
      // window.fireEvent for IE
      setTimeout(() => window.dispatchEvent(new Event('resize')), 500);
    });
  };

  _changeWrapperStyle = () => {
    const tag = document.querySelector('.info-sidebar-wrapper .info-sidebar-sticky-wrapper');
    if (!tag) return 'info-sidebar-sticky-wrapper';
    const clearCss = tag.className.split(' ').filter(cs => cs !== '' && cs !== ' ' && cs !== 'close').join(' ');
    return clearCss + (this.state.status ? '' : ' close');
  };

  render() {
    return (
      <div className={'info-sidebar ' + (this.state.status ? '' : ' close')}>
        <div className="info-sidebar-wrapper">
          <div className={this._changeWrapperStyle()}>
            {this.props.children}
            <div className={'side-menu-arrow-wrapper ' + (this.state.status ? '' : ' close')}>
              <div className="side-menu-arrow" onClick={this._switchSideMenu}>
                {iconWrapper('icon-zhedie')}
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
