import {
  ReactNode, useState, useCallback, Children, isValidElement, useRef, useEffect,
  useMemo, LiHTMLAttributes
} from 'react'

import { usePrefix } from '../ConfigProvider'
import { getText, isDev } from '../utils'
import { WithRef } from '../utils/type'
import { Option, OptionProps, OptionGroup, OptionGroupProps } from './Option'

export type Value = string | number

/** `OptionGroup` 的渲染样式，支持平铺（`default`）或 Tabs（`tabs`）两种 */
export type OptionGroupStyle = 'default' | 'tabs'

/** 获取用于 `Select` 的 `className` 前缀 */
export function useSelectPrefix() {
  return usePrefix('select')
}

/** `<Option>` 项对应的信息 */
export type OptionInfo<T> = {
  value: T
  disabled?: boolean
  content: ReactNode
  /** 需要传给 `option` 的 html 属性 */
  rootHtmlProps?: WithRef<LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>
}

/** `<OptionGroup>` 项对应的信息 */
export type OptionGroupInfo<T> = {
  title: string
  options: Array<OptionInfo<T>>
}

/** 对应的信息 */
export type OptionItem<T> = OptionInfo<T> | OptionGroupInfo<T>

/** 判断给定 `OptionItem` 项是否 `OptionGroupInfo` */
export function isGroup<T>(item: OptionItem<T>): item is OptionGroupInfo<T> {
  return Object.prototype.hasOwnProperty.call(item, 'options')
}

export type OptionItems<T> = Array<OptionItem<T>>

/** 基于传给 `Select` / `MultiSelect` 的 `children` 信息得到 `OptionItem` 列表 */
export function children2Items<T>(children: ReactNode): OptionItems<T> {
  const items: OptionItems<T> = []
  Children.toArray(children).filter(isValidElement).forEach(
    ({ type, props }, i) => {
      if (type === Option) {
        const { value, disabled, children: content, rootHtmlProps } = props as OptionProps<T>
        items.push({ value, disabled, content, rootHtmlProps })
        return
      }
      if (type === OptionGroup) {
        const { title, children: groupChildren } = props as OptionGroupProps<T>
        const options = children2Items(groupChildren) as Array<OptionInfo<T>>
        items.push({ title, options })
        return
      }
      if (isDev) {
        // eslint-disable-next-line no-console
        console.warn('Unknown element type, expected `<Option>` / `<OptionGroup>`, while got', type)
      }
    }
  )
  return items
}

/** 获取指定 `OptionItem` 列表中所有的 `OptionInfo` 项（包括 `OptionGroupInfo` 项中嵌套的 `OptionInfo`） */
export function getOptions<T>(items: OptionItems<T>): Array<OptionInfo<T>> {
  return items.reduce<Array<OptionInfo<T>>>((options, item) => (
    isGroup(item)
    ? [...options, ...item.options]
    : [...options, item]
  ), [])
}

/** overlay  FIXME(lizhifeng): TagsInput & AutoComplete 的 overlay 是否 visible 不完全由这 active 控制 */
export function useActive<T extends HTMLDivElement = HTMLDivElement>(
  disabled: boolean
) {
  const [active, setActive] = useState(false)
  const selectorRef = useRef<HTMLDivElement>(null)
  const overlayRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    if (disabled) {
      setActive(false)
      return
    }

    function handleDocumentClick(e: MouseEvent) {
      if (!e.target) return
      if (selectorRef.current && selectorRef.current.contains(e.target as Node)) return
      if (overlayRef.current && overlayRef.current.contains(e.target as Node)) return
      setActive(false)
    }
    // 注意这里设置 capture: true，是因为点击本身可能导致组件的状态变更，对应地导致对 DOM 节点的删除、更新操作；
    // `e.target` 同样可能会被操作；因此需要确保 `handleDocumentClick` 执行在正常的业务逻辑生效之前，
    // 这样它才能正确地判断事件发生时 `e.target` 在 DOM 树中的位置
    window.document.addEventListener('click', handleDocumentClick, true)
    return () => window.document.removeEventListener('click', handleDocumentClick, true)
  }, [disabled])

  const toggleActive = useCallback(() => {
    setActive(v => !v)
  }, [])

  return { active, setActive, selectorRef, overlayRef, toggleActive }
}

function match(text: string, keyword: string) {
  return text.toLowerCase().includes(keyword.toLowerCase())
}

function matchOption<T>(option: OptionInfo<T>, keyword: string) {
  return match(getText(option.content), keyword)
}

function matchOptions<T>(options: Array<OptionInfo<T>>, keyword: string) {
  if (!keyword) return options
  return options.filter(option => matchOption(option, keyword))
}

function matchItems<T>(items: OptionItems<T>, keyword: string): OptionItems<T> {
  if (!keyword) return items
  const matched: OptionItems<T> = []
  items.forEach(item => {
    if (isGroup(item)) {
      const options = matchOptions(item.options, keyword)
      if (options.length > 0) {
        matched.push({ ...item, options })
      }
      return
    }
    if (matchOption(item, keyword)) {
      matched.push(item)
    }
  })
  return matched
}

/** 自定义的数据获取逻辑 */
export type FetchFn<T> = (keyword: string) => OptionItems<T> | Promise<OptionItems<T>>

/** 搜索条件发生变更时会触发重新获取数据，这里给这个行为添加一个 debounce，单位 ms */
const fetchDelay = 200

function saveOptions<T>(map: Map<T, OptionInfo<T>>, items: OptionItems<T>) {
  getOptions(items).forEach(option => {
    map.set(option.value, option)
  })
  return map
}

/** 维护 option items 的逻辑（基于初始 children、自定义数据获取逻辑等） */
export function useOptionItems<T>(active: boolean, keyword: string, children?: ReactNode, fetch?: FetchFn<T>) {
  const itemsFromChildren = useMemo(() => children2Items<T>(children), [children])
  const fetchRef = useRef<FetchFn<T> | undefined>(fetch)
  fetchRef.current = fetch

  const [items, _setItems] = useState<OptionItems<T>>(itemsFromChildren)
  const [loading, setLoading] = useState(false)
  const [optionsMap] = useState(() => saveOptions(new Map<T, OptionInfo<T>>(), items))

  const getOption = useCallback((value: T) => optionsMap.get(value), [optionsMap])

  const setItems = useCallback((d: OptionItems<T>) => {
    saveOptions(optionsMap, d)
    _setItems(d)
  }, [optionsMap])

  // keyword 发生变化时获取数据
  useEffect(() => {
    let cancelled = false
    async function doFetch() {
      if (fetchRef.current == null) {
        setItems(matchItems(itemsFromChildren, keyword))
        return
      }
      setLoading(true)
      const fetchedItems = await fetchRef.current(keyword)
      if (!cancelled) {
        setItems(fetchedItems)
        setLoading(false)
      }
    }
    const timer = setTimeout(doFetch, fetchDelay)
    return () => {
      clearTimeout(timer)
      cancelled = true
    }
  }, [keyword, itemsFromChildren, setItems])

  // select 展开（active: false -> true）时重新获取数据
  useEffect(() => {
    if (!active) return
    let cancelled = false
    async function doFetch() {
      if (fetchRef.current == null) return
      setLoading(true)
      const fetchedItems = await fetchRef.current(keyword)
      if (!cancelled) {
        setItems(fetchedItems)
        setLoading(false)
      }
    }
    doFetch()
    return () => {
      cancelled = true
    }
  }, [active, setItems]) // eslint-disable-line react-hooks/exhaustive-deps

  return { items, loading, getOption }
}

export function toggle<T>(values: T[], value: T) {
  return (
    values.includes(value)
    ? values.filter(v => v !== value) // 当前项已选中则取消选中
    : [...values, value] // 当前项未选中则将其选中
  )
}