import React, {Component} from 'react'
import classNames from 'classnames/bind'
import {MdCheck, MdLock} from 'react-icons/lib/md'
import auto_bind from '../common/auto_bind'
import {for_all, find_in_array} from '../common/utilities'
import SearchBar from './search_bar'
import Filter from './filter'
import {new_values_fuse} from '../common/fields'
import {tolerant_equal} from '../selectors/base'

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

class NonExclusiveFieldFilter extends Component {
  constructor(props) {
    super(props)
    this.state = {
      query: "",
      results: [],
    }
    auto_bind(this)
  }

  componentWillReceiveProps(props) {
    if (!props.search_enabled && !tolerant_equal(props.values, this.props.results)) {
      this.update_results(props)
    }
  }

  update_results(props) {
    if (!props) {
      props = this.props
    }
    this.setState({results: props.values.map((value) => value.id)})
  }

  componentDidMount() {
    this.mounted = true
    if (!this.props.search_enabled) {
      this.update_results()
    }
  }

  componentWillUnmount() {
    this.mounted = false
  }

  on_query_change(query, results) {
    if (this.mounted && this.props.search_enabled) {
      this.setState({query, results})
    }
  }

  render() {
    return (
      <Filter
        className={cx('filterable-table__filter', this.props.className)}
        active={!for_all(this.props.values, (value) => !value.selected && !value.locked)}
        label={this.props.name}
        >
        {this.props.search_enabled ? (
          <SearchBar
            className={cx('filterable-table__filter-search-bar')}
            ref={(search_bar) => this.search_bar = search_bar}
            extend={false}
            make_fuse={new_values_fuse}
            items={this.props.values}
            default_results={this.props.values.map((value) => value.id)}
            on_query_change={this.on_query_change}
          />
        ) : null}
        <div className={cx('filterable-table__filter-values', {'filterable-table__filter-values_long': this.state.results.length > 6})}>
          {this.state.results.map((id) => find_in_array(this.props.values, (value) => value.id == id))
          .filter(Boolean)
          .sort((a, b) => a.name.localeCompare(b.name))
          .map((value) => {
            return (
              <div
                key={value.id}
                className={cx(
                  'filterable-table__filter-value',
                  {
                    'filterable-table__filter-value_selected': value.selected,
                    'filterable-table__filter-value_locked': value.locked,
                  }
                )}
                onClick={() => {
                  if (!value.locked) {
                    this.props.toggle_filtered_value(value)
                  }
                }}
                >
                <div className={cx('filterable-table__filter-value-name')}>
                  {value.icon ? (
                    <div className={cx('filterable-table__filter-value__icon')}>
                      {value.icon}
                    </div>
                  ) : null}
                  {value.name}
                </div>
                <div className={cx('filterable-table__filter-value-tick')}>
                  {value.locked ? (
                    <MdLock />
                  ) : (value.selected ? (
                    <MdCheck />
                  ) : null)}
                </div>
              </div>
            )
          })}
        </div>
        {this.state.results.length == 0 ? (
          <div className={cx('filterable-table__filter-values-placeholder')}>
            Aucune valeur
          </div>
        ) : null}
      </Filter>
    )
  }
}

NonExclusiveFieldFilter.defaultProps = {
  values: [],
  name: "",
  className: "",
  editable: false,
  search_enabled: true,
  toggle_filtered_value: (value) => {},
}

export default NonExclusiveFieldFilter