import React, { CSSProperties, isValidElement, PropsWithChildren, ReactNode } from 'react'
import classnames from 'classnames'

import { ComponentSize, usePrefix } from '../ConfigProvider'
import { concat } from '../utils'

export type CardType = 'shadowed' | 'bordered'
export type CardProps = {
  /**
   * + `shadowed` 带阴影的
   * + `bordered` 带边框的
   * @default 'shadowed'
   */
  type?: CardType
  /**
   * 卡片大小
   * + 不支持 'large'
   * @default 'default'
   */
  size?: ComponentSize
  /**
   * 标题
   * @default undefined
   */
  title?: ReactNode
  children: ReactNode
  className?: string
  style?: CSSProperties
}

export function Card(props: CardProps) {
  const { type = 'simple', children, title, size = 'default', className, style } = props
  const prefix = usePrefix('card')
  const typeCls = concat(prefix, type)
  const sizeCls = concat(prefix, size)

  return (
    <div className={classnames(prefix, typeCls, sizeCls, className)} style={style}>
      {renderTitle(title)}
      <CardContent>{children}</CardContent>
    </div>
  )
}

function renderTitle(title?: ReactNode) {
  if (isValidElement(title)) return title

  return <CardTitle title={title} />
}

export type CardTitleProps = {
  title: ReactNode
  /**
   * 标题是否有下边框
   *
   * 仅在 [CardType] 为 [bordered] 时生效
   * @default true
   */
  bordered?: boolean
  extra?: ReactNode
  className?: string
  style?: CSSProperties
}

export function CardTitle({ title, bordered = true, extra, className, style }: CardTitleProps) {
  const prefix = usePrefix('card')

  if (title == null) {
    return null
  }

  return (
    <div className={classnames(concat(prefix, 'title'), !bordered && concat(prefix, 'title', 'no-border'), className)} style={style}>
      {title}
      <span className={concat(prefix, 'title', 'extra')}>{extra}</span>
    </div>
  )
}

function CardContent({ children }: PropsWithChildren<{}>) {
  const prefix = usePrefix('card')
  return (
    <div className={concat(prefix, 'content')}>{children}</div>
  )
}