/**
 * @file Options Overlay
 * @desc 下拉选择浮层的内容
 */

import React, { useCallback, Key, Ref, createContext, useContext, ProviderProps } from 'react'
import cns from 'classnames'

import { ComponentSize, useLangData } from '../ConfigProvider'
import { CheckIcon } from '../icons'
import { Loading } from '../Loading'
import { Menu, MenuItem, MenuItemGroup } from '../Menu'
import Tabs, { TabPane } from '../Tabs'
import { concat, getText } from '../utils'
import { OptionInfo, OptionGroupInfo, OptionItem, OptionItems, isGroup, toggle, OptionGroupStyle, useSelectPrefix, Value } from './common'
import { CheckAll, Checkbox, CheckboxGroup } from '../Checkbox'

export interface OptionsOverlayCtxValue<T> {
  selected: T[]
  onSelect: (optionValue: T[]) => void
  multiple: boolean
  size: ComponentSize
}

/** 给 OptionsOverlay 传递信息的 context，包含当前选中值及选中操作的回调等信息 */
const optionsOverlayCtx = createContext<OptionsOverlayCtxValue<Value>>({
  selected: [],
  onSelect: () => undefined,
  multiple: false,
  size: 'default'
})

export function useOptionsOverlayCtx<T>() {
  return useContext(optionsOverlayCtx) as unknown as OptionsOverlayCtxValue<T>
}

export function OptionsOverlayProvider<T>({ value, children }: ProviderProps<OptionsOverlayCtxValue<T>>) {
  return <optionsOverlayCtx.Provider value={value as any}>{children}</optionsOverlayCtx.Provider>
}

/** 没有可选项时的占位内容 */
export function Empty() {
  const prefix = useSelectPrefix()
  const { emptyText } = useLangData('select')
  return <div className={concat(prefix, 'empty')}>{emptyText}</div>
}

/** items 中是否有可选项 */
export function hasAvailableOption(items: Array<OptionItem<unknown>>) {
  return items.some(item => (
    !isGroup(item) || item.options.length > 0
  ))
}

/** 全选 Option 项的内部 key */
const selectAllOptionKey: Value = '__icecream_select_all'

/** 渲染 option 项的组件 */
function RealOption<T>({ value, disabled, content, rootHtmlProps }: Omit<OptionInfo<T>, 'key'>) {
  const { selected, onSelect, multiple } = useOptionsOverlayCtx<T>()
  const active = selected.includes(value)

  const prefix = useSelectPrefix()
  const optionClassName = concat(prefix, 'option')
  const handleClick = useCallback(() => {
    onSelect(multiple ? toggle(selected, value) : [value])
  }, [value, selected, onSelect, multiple])

  const checkedIcon = active && multiple && (
    <CheckIcon className={concat(optionClassName, 'icon')} />
  )

  return (
    <MenuItem
      disabled={disabled}
      active={active}
      onClick={handleClick}
      rootHtmlProps={{ title: getText(content), ...rootHtmlProps }}
    >
      <span className={concat(optionClassName, 'text')}>{content}</span>
      {checkedIcon}
    </MenuItem>
  )
}

interface RealOptionGroupProps<T> {
  title: string
  options: Array<OptionInfo<T>>
}

/** 渲染 option 组的组件 */
function RealOptionGroup<T>({ title, options }: RealOptionGroupProps<T>) {
  const optionsView = options.map(option => (
    <RealOption<T> key={option.value as unknown as Key} {...option} />
  ))
  return (
    <MenuItemGroup title={title}>
      {optionsView}
    </MenuItemGroup>
  )
}

type OptionsProps<T> = {
  options: Array<OptionInfo<T>>
}

/** 在 Overlay 中渲染 `<Option>` 列表 */
export function Options<T>({ options }: OptionsProps<T>) {
  const { size } = useOptionsOverlayCtx()
  const optionsView = options.map(option => (
    <RealOption {...option} key={option.value as unknown as Key} />
  ))
  return <Menu size={size}>{optionsView}</Menu>
}

type OptionGroupsProps<T> = {
  groups: Array<OptionGroupInfo<T>>
}

/** 在 Overlay 中渲染 `<OptionGroup>` 列表 */
export function OptionGroups<T>({ groups }: OptionGroupsProps<T>) {
  const { size } = useOptionsOverlayCtx()
  const optionGroupsView = groups.map((group, i) => (
    <RealOptionGroup key={i} title={group.title} options={group.options} />
  ))
  return <Menu size={size}>{optionGroupsView}</Menu>
}

/** 在 Overlay 中渲染 `<OptionGroup>` 列表（使用 Tabs 样式） */
export function TabsStyleOptionGroups<T>({ groups }: OptionGroupsProps<T>) {
  const prefix = useSelectPrefix()
  const tabsClz = concat(prefix, 'option-group-tabs')
  const { size } = useOptionsOverlayCtx()
  const tabPanes = groups.map((group, i) => (
    <TabPane className={concat(tabsClz, 'tab-pane')} key={i} name={group.title} value={i}>
      <Menu className={concat(tabsClz, 'tab-pane-content')} size={size}>
        {group.options.map(option => (
          <RealOption {...option} key={option.value as unknown as Key} />
        ))}
      </Menu>
    </TabPane>
  ))
  // select size: default / large 对应 tabs size: default
  const tabsSize = size === 'small' ? 'small' : 'default'
  return (
    <Tabs className={tabsClz} size={tabsSize}>
      {tabPanes}
    </Tabs>
  )
}

/** 渲染 CheckboxOption 项的组件 */
function CheckboxOption<T extends Value>({ disabled, content, rootHtmlProps, value }: Omit<OptionInfo<T>, 'key'>) {
  const prefix = useSelectPrefix()
  const optionClassName = concat(prefix, 'option')
  const labelClassName = cns(
    concat(optionClassName, 'text'),
    disabled && concat(optionClassName, 'disabled')
  )
  const checkboxClassName = concat(optionClassName, 'checkbox')
  const label = <span className={labelClassName}>{content}</span>

  return (
    <MenuItem
      disabled={disabled}
      className={concat(optionClassName, 'with-checkbox')}
      rootHtmlProps={{ title: getText(content), ...rootHtmlProps }}
    >
      {value === selectAllOptionKey
        ? <CheckAll className={checkboxClassName} disabled={disabled}>{label}</CheckAll>
        : <Checkbox className={checkboxClassName} value={value} disabled={disabled}>{label}</Checkbox>}
    </MenuItem>
  )
}

/** 在 Overlay 中渲染 `<CheckboxOption>` 列表 */
export function CheckboxOptions<T extends Value>({ options }: OptionsProps<T>) {
  const { size, selected, onSelect } = useOptionsOverlayCtx()

  const optionsView = options.map(option => (
    <CheckboxOption {...option} key={option.value as unknown as Key} />
  ))
  return (
    <Menu size={size}>
      <CheckboxGroup
        value={selected as T[]}
        onChange={onSelect}
      >
        {optionsView}
      </CheckboxGroup>
    </Menu>
  )
}

type OverlayProps<T> = {
  wrapperRef: Ref<HTMLDivElement>
  items: OptionItems<T>
  loading: boolean
  groupStyle: OptionGroupStyle
  optionStyle?: 'checkbox' | 'default'
  selectAllVisible?: boolean
}

/** 下拉浮层的内容，TODO: 支持键盘操作 */
export default function Overlay<T extends Value>({
  wrapperRef, items, loading, groupStyle, optionStyle = 'default', selectAllVisible = false
}: OverlayProps<T>) {
  const prefix = useSelectPrefix()
  const { selectAllText } = useLangData('select')

  const options: Array<OptionInfo<T>> = []
  const optionGroups: Array<OptionGroupInfo<T>> = []
  for (const item of items) {
    if (isGroup(item)) optionGroups.push(item)
    else options.push(item)
  }

  // 检查是否混用了 <Option> & <OptionGroup>
  if (options.length > 0 && optionGroups.length > 0) {
    throw new Error('Unexpected mix of `<Option>` & `<OptionGroup>`.')
  }

  const content = (() => {
    if (!hasAvailableOption(items)) return <Empty />
    if (optionGroups.length > 0) {
      if (groupStyle === 'tabs') return <TabsStyleOptionGroups groups={optionGroups} />
      return <OptionGroups groups={optionGroups} />
    }
    if (optionStyle === 'checkbox') {
      if (selectAllVisible) {
        options.unshift({
          content: selectAllText,
          value: selectAllOptionKey as T,
          disabled: options.every(it => it.disabled)
        })
      }
      return <CheckboxOptions options={options} />
    }
    return <Options options={options} />
  })()

  return (
    <Loading childrenVisibility="hidden" loading={loading}>
      <div ref={wrapperRef} className={concat(prefix, 'overlay')}>
        {content}
      </div>
    </Loading>
  )
}