import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

import '../base';
import styles from './Toolbar.styl';
import groupStyle from './Button.Group.styl';
import menuStyle from './Button.Menu.styl';
import buttonStyle from './Button.styl';
import ToolbarSearch from '../molecules/Toolbar.Search';
import ToolbarFilter from '../molecules/Toolbar.Filter';
import ToolbarGroup from './Toolbar.Group';

export default class Toolbar extends React.Component {

  constructor(props) {
    super(props);
    this.state = {};
  }

  getChildContext() {
    const { filterBoxNode } = this.state;
    return { filterBoxNode };
  }

  componentDidMount() {
    this.setState({ filterBoxNode: this.filterBoxNode }); // eslint-disable-line react/no-did-mount-set-state
  }

  render() {
    const { children, style } = this.props;

    const classes = classNames({
      [styles.toolbar]: true,
      [buttonStyle.toolbar]: true,
      [groupStyle.toolbar]: true,
      [menuStyle.toolbar]: true
    });

    return (
      <div>
        <div className={classes} style={style}>
          {children}
        </div>
        <div ref={(ref) => { this.filterBoxNode = ref; }} />
      </div>
    );
  }

}

Toolbar.Group = ToolbarGroup;
Toolbar.Search = ToolbarSearch;
Toolbar.Filter = ToolbarFilter;

Toolbar.propTypes = {
  children: PropTypes.node,
  // eslint-disable-next-line react/forbid-prop-types
  style: PropTypes.object
};

Toolbar.defaultProps = {
  children: undefined,
  style: undefined
};

Toolbar.childContextTypes = {
  // eslint-disable-next-line react/forbid-prop-types
  filterBoxNode: PropTypes.any
};