import React, { CSSProperties, HTMLAttributes, ReactNode, useCallback } from 'react'
import cln from 'classnames'
import CSSMotion from 'rc-motion'

import { usePrefix } from '../ConfigProvider'
import { RightThinIcon } from '../icons'
import { CollapsePanelValue, useCollapse } from './hooks'
import { concat } from '../utils'
import collapseMotion from './motion'
import { WithRef } from '../utils/type'

export interface CollapsePanelProps<T extends CollapsePanelValue> {
  /**
   * 面板头部内容
   */
  title: ReactNode
  /**
   * 面板头部的额外内容，位于面板右上
   */
  extra?: ReactNode
  value: T
  children: ReactNode
  className?: string
  style?: CSSProperties
  rootHtmlProps?: WithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
}

export function CollapsePanel<T extends CollapsePanelValue>(props: CollapsePanelProps<T>) {
  const { title, extra, value, children, className: classNameFromProps, rootHtmlProps, style } = props
  const prefix = usePrefix('collapse-panel')
  const activePrefix = concat(prefix, 'active')
  const headerPrefix = concat(prefix, 'header')
  const titlePrefix = concat(headerPrefix, 'title')
  const titleWrapperPrefix = concat(titlePrefix, 'wrapper')
  const iconPrefix = concat(headerPrefix, 'icon')
  const extraPrefix = concat(headerPrefix, 'extra')
  const bodyPrefix = concat(prefix, 'body')
  const bodyWrapperPrefix = concat(bodyPrefix, 'wrapper')
  const leavedPrefix = concat(prefix, 'leaved')
  const motionPrefix = concat(prefix, 'motion')
  const { value: activeValue, toggleActive } = useCollapse<T>()
  const isExpanded = activeValue.indexOf(value) !== -1
  const className = cln(prefix, classNameFromProps, isExpanded && activePrefix, rootHtmlProps?.className)

  const handleHeaderClick = useCallback(() => {
    // TODO 无边框和背景时改为点击name触发
    toggleActive(value)
  }, [toggleActive, value])

  const handleExtraClick = useCallback((e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    e.stopPropagation()
  }, [])

  return (
    <div {...rootHtmlProps} className={className} style={{ ...style, ...rootHtmlProps?.style }}>
      <div className={headerPrefix} onClick={handleHeaderClick}>
        <div className={titleWrapperPrefix}>
          <div className={iconPrefix}><RightThinIcon /></div>
          <div className={titlePrefix}>{title}</div>
        </div>
        <div className={extraPrefix} onClick={handleExtraClick}>{extra}</div>
      </div>
      <CSSMotion
        visible={isExpanded}
        leavedClassName={leavedPrefix}
        motionName={motionPrefix}
        {...collapseMotion}
      >
        {({ className: motionClassName, style: motionStyle }, ref) => (
          <div className={cln(motionClassName, bodyWrapperPrefix)} style={motionStyle} ref={ref}>
            <div className={bodyPrefix}>
              {children}
            </div>
          </div>
        )}
      </CSSMotion>
    </div>
  )
}