import cns from 'classnames'
import React, { CSSProperties, ReactNode } from 'react'

import { FormValidateStatus } from '../Form'
import { concat } from '../utils'
import { useFocused } from '../utils/hooks'
import { ComponentSize, usePrefix } from '../ConfigProvider'
import { useInputStyle, inputGroupSizeCtx } from './input'

export interface Props {
  /** 尺寸 */
  size?: ComponentSize
  /** 校验状态 */
  validateStatus?: FormValidateStatus
  /** 自定义样式名 */
  className?: string
  /** 自定义样式 */
  style?: CSSProperties
  /** 内容 */
  children?: ReactNode
}

export default function InputGroup({ size, validateStatus, className, children, ...otherProps }: Props) {
  const { focused, focusedHandlers } = useFocused()
  const inputGroupClassName = usePrefix('input-group')
  const inputStyleClassName = useInputStyle({
    focused,
    validateStatus,
    size,
    disabled: false
  })
  const wrapperClassName = cns(
    inputGroupClassName,
    inputStyleClassName,
    className
  )

  return (
    <inputGroupSizeCtx.Provider value={size}>
      <div
        {...otherProps}
        {...focusedHandlers}
        className={wrapperClassName}
      >
        {children}
      </div>
    </inputGroupSizeCtx.Provider>
  )
}

export interface InputGroupItemProps {
  /** 是否灰色底 */
  grey?: boolean
  /** 自定义样式名 */
  className?: string
  /** 自定义样式 */
  style?: CSSProperties
  /** 内容 */
  children?: ReactNode
}

export function InputGroupItem({ grey = true, className, style, children }: InputGroupItemProps) {
  const inputGroupItemClassName = usePrefix('input-group-item')
  const inputStyleClassName = useInputStyle({ focused: false, disabled: false })
  const wrapperClassName = cns(
    inputGroupItemClassName,
    grey && concat(inputGroupItemClassName, 'grey'),
    inputStyleClassName,
    className
  )
  return (
    <div className={wrapperClassName} style={style}>{children}</div>
  )
}