import React, { ReactNode, useCallback, useMemo } from 'react'

import { useValue } from '../utils/hooks'
import { collapseContext, CollapseContextValue, CollapsePanelValue } from './hooks'

export { CollapsePanel } from './Panel'
export type { CollapsePanelProps } from './Panel'
export { useCollapse } from './hooks'
export type { CollapseContextValue } from './hooks'

export interface CollapseProps<T extends CollapsePanelValue> {
  /**
   * 同一时间只有单个面板展开
   *
   * @default false
   */
  single?: boolean
  /**
   * 对应打开的面板的value
   */
  value?: T[]
  /**
   * 默认打开的面板的value
   */
  defaultValue?: T[]
  /**
   * 改变面板折叠状态时的回调
   */
  onChange?: (value: T[]) => void
  children: ReactNode
}

export default function Collapse<T extends CollapsePanelValue>(props: CollapseProps<T>) {
  const { single = false, children, defaultValue = [], value: valueFromProps, onChange } = props
  const { value, setValue } = useValue({ valueFromProps, defaultValue, onChange })

  const toggleActive = useCallback((val: T) => {
    if (value.indexOf(val) === -1) {
      if (single) {
        setValue([val])
      } else {
        setValue([...value, val])
      }
    } else {
      // eslint-disable-next-line no-lonely-if
      if (single) {
        setValue([])
      } else {
        setValue(value.filter(item => item !== val))
      }
    }
  }, [value, single, setValue])

  const contextValue = useMemo<CollapseContextValue<T>>(() => ({
    value,
    toggleActive
  }), [value, toggleActive])

  const context = collapseContext as unknown as React.Context<CollapseContextValue<T> | null>
  return (
    <context.Provider value={contextValue}>
      {children}
    </context.Provider>
  )
}