import React, { Component } from 'react';
import PropTypes from 'prop-types';

import MultiSelect from './MultiSelect';

class FilterDropdown extends Component {
  constructor(props) {
    super(props);

    this.beforeMultiSelectChange = this.beforeMultiSelectChange.bind(this);
    this.beforeMultiSelectUnmount = this.beforeMultiSelectUnmount.bind(this);
    this.beforeMultiSelectMount = this.beforeMultiSelectMount.bind(this);
    this.updateActiveState = this.updateActiveState.bind(this);
  }

  beforeMultiSelectChange(selected, multiSelectId) {
    this.updateActiveState(multiSelectId, selected);
  }

  beforeMultiSelectUnmount(multiSelectId) {
    this.updateActiveState(multiSelectId);
  }

  beforeMultiSelectMount(multiSelectId) {
    this.updateActiveState(multiSelectId);
  }

  updateActiveState(multiSelectId, selected = []) {
    // Notify the parent Toolbar.Filter component with our new active state.
    const active = !!selected.length;

    if (this.context.setFilterActive) {
      this.context.setFilterActive(multiSelectId, active);
    }
  }

  render() {
    return (
      <MultiSelect
        onBeforeChange={this.beforeMultiSelectChange}
        onBeforeMount={this.beforeMultiSelectMount}
        onBeforeUnmount={this.beforeMultiSelectUnmount}
        inline
        {...this.props}
      />
    );
  }
}

MultiSelect.propTypes = {
  onToggle: PropTypes.func,
  defaultSelected: PropTypes.array // eslint-disable-line react/forbid-prop-types
};

MultiSelect.defaultProps = {
  onToggle: undefined,
  defaultSelected: []
};

FilterDropdown.contextTypes = {
  setFilterActive: PropTypes.func
};

export default FilterDropdown;