import React, { ReactNode, RefObject, useCallback, useMemo, useRef, useState } from 'react'
import RcCascader, { CascaderProps as RcCascaderProps, BaseOptionType as RcCascaderOption, ShowSearchType } from 'rc-cascader'
import { CascaderRef, DefaultOptionType } from 'rc-cascader/lib/Cascader'
import cns from 'classnames'

import { useLangData, usePrefix } from '../ConfigProvider'
import { useGetPopupContainer } from '../PopupContainerProvider'
import { CommonProps, useInputSize, useInputStyle } from '../Input/input'
import { concat } from '../utils'
import { RightThinIcon, CloseCircleFilledIcon, DownIcon, SearchThinIcon } from '../icons'
import { useUpdate, useValue } from '../utils/hooks'
import { highlightKeyword } from './utils'
import { Empty } from '../Empty'

export type CascaderValue = Array<string | number>

export type CascaderOption = {
  /** 级联项的值 */
  value: string | number
  /** 级联项的文本 */
  label: NonNullable<ReactNode>
  /** 是否禁用级联项 */
  disabled?: boolean
  /** 子级项 */
  children?: CascaderOption[]
}

export interface CascaderBaseProps<T extends (CascaderValue | CascaderValue[])> extends Omit<CommonProps<T | null>, 'onChange'> {
  /** 可选项数据源 */
  options: CascaderOption[]
  /** 选择后的回调 */
  onChange?: (value: T, selectedOptions: CascaderOption[]) => void
  /**
   * 是否选择后即时触发改变
   * @default false
   */
  changeOnSelect?: boolean
  /**
   * 次级菜单的展开方式
   * @default hover
   */
  expandTrigger?: 'hover' | 'click'
  /** 浮层样式名 */
  overlayClassName?: string
  /** 选择后展示的渲染函数 */
  displayRender?: (selectedOptions: CascaderOption[]) => ReactNode
  /** 是否支持搜索 */
  searchable?: boolean
  /** 是否有清空功能 */
  clearable?: boolean
}

export interface CascaderProps<T extends CascaderValue = CascaderValue> extends CascaderBaseProps<T> {
  onChange?: (value: T | null, selectedOptions: CascaderOption[]) => void
}

export interface MultiCascaderProps<T extends CascaderValue> extends CascaderBaseProps<T[]> {
  onChange?: (value: T[], selectedOptions: CascaderOption[]) => void
}

function defaultDisplayRender(selectedOptions: CascaderOption[]) {
  return selectedOptions.map(it => it.label).join(' / ')
}

function useSharedProps<T extends CascaderValue | CascaderValue[]>(
  props: CascaderBaseProps<T>,
  {
    multiple = false
  }
): Omit<RcCascaderProps, 'value' | 'onChange'> & { ref: RefObject<any> } {
  const {
    value: valueFromProps,
    defaultValue,
    options,
    style,
    size: sizeFromProps,
    validateStatus,
    placeholder,
    disabled = false,
    changeOnSelect = false,
    expandTrigger = 'hover',
    onChange,
    className,
    overlayClassName,
    displayRender = defaultDisplayRender,
    searchable = false,
    clearable = false,
    ...restProps
  } = props
  const [visible, setVisible] = useState(false)
  const size = useInputSize(sizeFromProps)
  const prefix = usePrefix('cascader')
  const { emptyDataText } = useLangData('cascader')
  const ref = useRef<CascaderRef>(null)

  const getPopupContainer = useGetPopupContainer()

  const dropdownRender = useCallback((menu: React.ReactElement<any, string | React.JSXElementConstructor<any>>) => {
    if (options.length === 0) {
      return <Empty className={concat(prefix, 'empty')} image={null} title={emptyDataText} />
    }
    return menu
  }, [emptyDataText, options.length, prefix])

  const checkable = useMemo(
    () => (multiple ? <span className={`${prefix}-checkbox-inner`} /> : false),
    [multiple, prefix]
  )

  const mergedShowSearch = useMemo<ShowSearchType | boolean>(() => {
    if (!searchable) {
      return searchable
    }

    return {
      render: defaultSearchRender
    }
  }, [searchable])

  useUpdate(() => {
    if (visible === false) {
      ref.current?.blur()
    }
  }, [visible])

  return {
    ref,
    notFoundContent: <Empty className={concat(prefix, 'empty')} image={null} title={emptyDataText} />,
    className: cns(useInputStyle({ size, validateStatus, disabled, focused: visible }), concat(prefix, 'size', size)),
    displayRender: (
      _: string[], selectedOptions: DefaultOptionType[] | undefined
    ) => selectedOptions && displayRender(toCascaderOption(selectedOptions)),
    options,
    disabled,
    prefixCls: prefix,
    open: visible,
    showSearch: mergedShowSearch,
    onDropdownVisibleChange: setVisible,
    expandTrigger,
    expandIcon: <RightThinIcon />,
    inputIcon: searchable ? <SearchThinIcon /> : <DownIcon />,
    dropdownRender,
    allowClear: clearable,
    clearIcon: <CloseCircleFilledIcon />,
    removeIcon: <CloseCircleFilledIcon />,
    dropdownClassName: cns(overlayClassName, concat(prefix, 'dropdown', 'size', size)),
    getPopupContainer,
    changeOnSelect,
    placeholder,
    maxTagCount: 'responsive',
    checkable,
    style,
    dropdownAlign: { offset: [0, 8] },
    ...restProps
  }
}

function toCascaderOption(options: DefaultOptionType[]): CascaderOption[] {
  return options.map(opt => ({
    label: opt.label!,
    value: opt.value!
  }))
}

export default function Cascader<T extends CascaderValue = CascaderValue>(props: CascaderProps<T>) {
  const { value: valueFromProps, defaultValue = null, onChange } = props
  const { value, setValue } = useValue({
    valueFromProps,
    defaultValue,
    onChange: useCallback((v: T | null, o: CascaderOption[]) => {
      // 兼容之前空为 null 的写法，感觉 [] 更适合
      onChange?.(v ?? null, o)
    }, [onChange])
  })
  const { checkable, ...rcCascaderProps } = useSharedProps<T>(props, {})

  const handleChange = useCallback((innerValue: CascaderValue, innerOptions: RcCascaderOption[]) => {
    // innerValue 和 innerOptions 类型说不会为 undefined，实际上清空会返回 undefined
    setValue(innerValue as T, innerOptions as CascaderOption[] ?? [])
  }, [setValue])

  return (
    <RcCascader
      checkable={false}
      value={value ?? []}
      onChange={handleChange}
      {...rcCascaderProps}
    />
  )
}

export function MultiCascader<T extends CascaderValue = CascaderValue>(props: MultiCascaderProps<T>) {
  const { value: valueFromProps, defaultValue = null, onChange } = props
  const { value, setValue } = useValue({
    valueFromProps,
    defaultValue,
    onChange: useCallback((v: T[] | null, o: CascaderOption[]) => {
      onChange?.(v ?? [], o)
    }, [onChange])
  })
  const rcCascaderProps = useSharedProps(props, { multiple: true })

  const handleChange = useCallback((innerValue: CascaderValue[], innerOptions: RcCascaderOption[]) => {
    setValue(innerValue as T[], innerOptions as CascaderOption[])
  }, [setValue])

  return (
    <RcCascader
      // 让 ts 知道 onChange 是多选的，checkable 的实际值会被覆盖
      checkable
      {...rcCascaderProps}
      value={value || undefined}
      onChange={handleChange}
    />
  )
}

const defaultSearchRender: ShowSearchType['render'] = (inputValue, path, prefixCls, fieldNames) => {
  const optionList: React.ReactNode[] = []

  // We do lower here to save perf
  const lower = inputValue.toLowerCase()

  path.forEach((node, index) => {
    if (index !== 0) {
      optionList.push(' / ')
    }

    let label = (node as any)[fieldNames.label!]
    const type = typeof label
    if (type === 'string' || type === 'number') {
      label = highlightKeyword(String(label), lower, prefixCls)
    }

    optionList.push(label)
  })
  return optionList
}