import React, { useEffect, useState } from 'react'
import classnames from 'classnames'
import uniqBy from 'lodash/uniqBy'
import { ColumnInstance } from 'react-table'

import { Checkbox, CheckboxGroup } from '../../../Checkbox'
import { concat } from '../../../utils'
import Button from '../../../Button'
import { useLangData } from '../../../ConfigProvider'
import { TableColumnFilterOptions, TableColumnSelectFilterValue } from '../../types'
import { Radio, RadioGroup } from '../../../Radio'

export { FilterIcon as Icon } from '../../../icons'

type SelectFilterValue = TableColumnSelectFilterValue[]

function toSelectFilterValue(
  v?: TableColumnSelectFilterValue | TableColumnSelectFilterValue[] | null
): SelectFilterValue {
  if (Array.isArray(v)) return v
  if (v == null) return []
  return [v]
}

function toSingleValue(v: SelectFilterValue): TableColumnSelectFilterValue | null {
  if (v.length === 0) return null
  return v[0]
}

function toMultiValue(v: SelectFilterValue): TableColumnSelectFilterValue[] {
  return v
}

export type SelectFilterProps<R extends object> = {
  prefix: string
  column: ColumnInstance<R>
  onClose(): void
  visible: boolean
}

export default function SelectFilter<R extends object>(props: SelectFilterProps<R>) {
  const { prefix: parentPrefix, onClose, column, visible } = props
  const prefix = concat(parentPrefix, 'select')
  const langData = useLangData('table')
  const filterOptions: TableColumnFilterOptions = column.meta.filter!
  const { type, value, optionItems } = filterOptions
  const [innerValue, setInnerValue] = useState(toSelectFilterValue(value))

  const optionitemViews = React.useMemo(() => {
    if (optionItems) return optionItems
    // 如果没有传过滤项，则把待过滤的数据去重后作为过滤项
    const dataItems = uniqBy(column.preFilteredRows, row => row.values[column.id])
      .map(row => row.values[column.id])
      .map(data => ({ value: data, text: data }))
    return dataItems
  }, [column, optionItems])

  function handleOk(val: SelectFilterValue) {
    if (filterOptions.type === 'select') {
      filterOptions.onChange?.(toSingleValue(val))
    } else {
      filterOptions.onChange?.(toMultiValue(val))
    }
    onClose()
  }

  function handleReset() {
    const val = toSelectFilterValue()
    handleOk(val)
  }

  // （目前只支持受控模式）打开过滤器时，同步 value 到 innerValue
  useEffect(() => {
    if (visible) {
      setInnerValue(toSelectFilterValue(value))
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [visible])

  if (type === 'select') {
    return (
      <ul className={prefix}>
        <RadioGroup<TableColumnSelectFilterValue>
          value={toSingleValue(innerValue)}
          onChange={val => setInnerValue(toSelectFilterValue(val))}
        >
          {optionitemViews.map((item, i) => {
            const optionPrefix = concat(prefix, 'option')
            const checkedPrefix = innerValue.indexOf(item.value) > -1 && concat(optionPrefix, 'checked')

            return (
              <li key={i} className={classnames(optionPrefix, checkedPrefix)} >
                <Radio value={item.value} className={concat(prefix, 'option', 'checkbox')}>
                  {item.text}
                </Radio>
              </li>
            )
          })}
          <li className={concat(prefix, 'footer')}>
            <Button type="link" onClick={() => handleOk(innerValue)}>{langData.filter.okText}</Button>
            <Button type="link" onClick={handleReset}>{langData.filter.resetText}</Button>
          </li>
        </RadioGroup>
      </ul>
    )
  }

  return (
    <ul className={prefix}>
      <CheckboxGroup<TableColumnSelectFilterValue>
        value={toMultiValue(innerValue)}
        onChange={val => setInnerValue(toSelectFilterValue(val))}
      >
        {optionitemViews.map((item, i) => {
          const optionPrefix = concat(prefix, 'option')
          const checkedPrefix = innerValue.indexOf(item.value) > -1 && concat(optionPrefix, 'checked')

          return (
            <li key={i} className={classnames(optionPrefix, checkedPrefix)} >
              <Checkbox value={item.value} className={concat(prefix, 'option', 'checkbox')}>
                {item.text}
              </Checkbox>
            </li>
          )
        })}
        <li className={concat(prefix, 'footer')}>
          <Button type="link" onClick={() => handleOk(innerValue)}>{langData.filter.okText}</Button>
          <Button type="link" onClick={handleReset}>{langData.filter.resetText}</Button>
        </li>
      </CheckboxGroup>
    </ul>
  )
}