/**
 * Created by baoyinghai on 1/4/17.
 */
import React from 'react';
import ReactDOM from 'react-dom';
import { Row, Col } from '../../../components/mxa';

export default class FilterBarContainer extends React.Component {

  constructor(props) {
    super(props);
    /* eslint-disable */
    const height = Math.ceil(this.props.filters.length / 2) * 40 + 19;
    this.height = height + 'px';
  }

  _switchHandler = e => {
    e.stopPropagation();
    if (this.tag && this.tag.compareDocumentPosition(e.target) !== 20 && this.props.advancedSearch) {
      const dropTags = document.querySelectorAll('.mx-select-dropdown.mx-select-dropdown--single.mx-select-dropdown-placement-bottomLeft');
      if (dropTags && dropTags.length > 0) {
        if (Array.prototype.some.call(dropTags, d => d.compareDocumentPosition(e.target) === 20)) {
          return;
        }
      }
      const { switchHandler } = this.props;
      switchHandler && switchHandler();
    }
  };

  componentDidMount() {
    const defaultSearchBar = this.props.querySelector;
    const tags = document.querySelectorAll('.' + defaultSearchBar);
    if (tags.length > 0) {
      this.tag = tags[tags.length - 1];
    }
  }

  componentWillUnmount() {
    window.removeEventListener('click', this._switchHandler);
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.advancedSearch) {
      setTimeout(() => window.addEventListener('click', this._switchHandler))
    } else {
      window.removeEventListener('click', this._switchHandler);
    }
  }

  render() {
    const { prefixCls } = this.props;
    const defaultSearchBar = `${prefixCls}-search-bar-default`;
    return (
      <div className={defaultSearchBar} style={{ height: this.props.advancedSearch ? this.height : '0px' }}>
        {this.props.children}
      </div>
    );
  }
}
