import { cloneElement } from 'react'
import classnames from 'classnames'
import { find, filter, size } from 'lodash'

export default class Filter {
  constructor (addFilter, closeDropdown, filters) {
    this.addFilter = addFilter
    this.closeDropdown = closeDropdown

    const appliedFilter = find(filters, filter => filter.constructor.name === this.constructor.name)

    if (appliedFilter) {
      this.id = appliedFilter.id
      this.filterValues = appliedFilter.filterValues
    } else {
      this.id = Math.random()
    }
  }

  /**
   * must be created from extended class
   * This is the style that gets rendered on the first level of filter dropdown
   * Type - node
   */
  filteringAttribute = null
  /**
   * must be created from extended class
   * This item gets renderded after first level item is picked. This is options list.
   * Type - function
   */
  renderOptions = null
  /**
   * must be created from extended class
   * This is the style gets rendered in applied filters list before add filter button.
   * Type - function
   */
  renderAppliedFilter = null

  optionSelected = false
  filterValues = []

  renderFilteringAttributes = props => {
    return cloneElement(this.filteringAttribute, {
      ...this.filteringAttribute.props,
      ...props,
      className: classnames('requests-filter-add-attribute-item', this.filteringAttribute.props.className)
    })
  }

  selectOption = () => {
    this.optionSelected = true
  }

  applyFilter = () => {
    this.addFilter(this)
    this.closeDropdown()
  }

  removeFilterValue = item => {
    const i = this.filterValues.indexOf(item)
    this.filterValues.splice(i, 1)
  }

  addFilterValue = item => this.filterValues.push(item)

  toggleFilterValue = value => {
    if (this.filterValues.includes(value)) {
      this.removeFilterValue(value)
    } else {
      this.addFilterValue(value)
    }
  }

  filter = items => {
    if (!size(this.filterValues)) {
      return items
    }

    return filter(items, this.filterRule)
  }
}