import React, {Component} from 'react'
import classNames from 'classnames/bind'
import {MdArrowDropDown, MdFace} from 'react-icons/lib/md'
import {color} from '../common/constants'
import {array_contains} from '../common/utilities'
import auto_bind from '../common/auto_bind'
import store from '../common/store'
import {alert_warning} from '../actions/display'

const cx = classNames.bind(require('../styles/filter.scss'))

class Filter extends Component {
  constructor(props) {
    super(props)
    this.state = {
      editing: false,
    }
    auto_bind(this)
  }

  start_editing() {
    this.setState({editing: true})
  }

  stop_editing() {
    this.setState({editing: false})
  }

  render() {
    let {onClick, active, label, children, className} = this.props
    let has_dropdown = !Array.isArray(children) || children.length > 0
    return (
      <div className={cx('filter', {'filter_sortable': onClick, 'filter_filterable': has_dropdown, 'filter_editing': this.state.editing}, className)}>
        <div className={cx('filter__display', {'filter__display_active': active})} onClick={onClick}>
          <div className={cx('filter__label')}>
            {label}
          </div>
          {has_dropdown ? (
            <div className={cx('filter__caret')}>
              <MdArrowDropDown/>
            </div>
          ) : null}
        </div>
        {has_dropdown ? (
          <div className={cx('filter__dropdown')}>
            {typeof children === "function" ? children({start_editing: this.start_editing, stop_editing: this.stop_editing}) : children}
          </div>
        ) : null}
      </div>
    )
  }
}

Filter.defaultProps = {
  onClick: null,
  active: false,
  className: "",
  label: "",
  children: [],
}

export default Filter