import React, { CSSProperties, HTMLAttributes, ReactNode, useState } from 'react'
import classnames from 'classnames'

import { usePrefix } from '../ConfigProvider'
import { concat } from '../utils'
import { CloseIcon, CheckCircleIcon, InfoIcon, TipIcon, CloseCircleIcon } from '../icons'
import { EnvProvider } from '../Link/env'
import { WithRef } from '../utils/type'

export type AlertType = 'default' | 'info' | 'error' | 'success' | 'warning'
export type AlertClosableObject = { icon?: ReactNode, onClose?(): void }
export type AlertClosable = boolean | AlertClosableObject
export type AlertProps = {
  /** 左侧 icon */
  icon?: ReactNode
  type?: AlertType
  message: ReactNode
  desc?: ReactNode
  /**
   * 是否可关闭 & 自定义关闭按钮和 onClose
   *
   * 如果为 `true` 则会用默认的关闭图标
   *
   * @default undefined
   */
  closable?: AlertClosable
  className?: string
  style?: CSSProperties
  /**
   * 根元素的 html 属性
   */
  rootHtmlProps?: WithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
}

export default function Alert(props: AlertProps) {
  const { className, message, desc, icon, type = 'default', closable, rootHtmlProps, style, ...rest } = props
  const [visible, setVisible] = useState(true)
  const prefix = usePrefix('alert')
  const typePrefix = concat(prefix, type)
  const iconPrefix = concat(prefix, 'icon')
  const contentPrefix = concat(prefix, 'content')
  const closePrefix = concat(prefix, 'close')
  const descPrefix = concat(contentPrefix, 'desc')

  const innerIcon = icon === true ? getIconByType(type) : icon
  const innerCloseIcon = getCloseIcon(closable)

  function handleClose() {
    if (closable === true) {
      setVisible(false)
      return
    }

    if (typeof closable === 'object') {
      setVisible(false)
      closable.onClose?.()
    }
  }

  const cls = classnames(
    className, prefix, typePrefix,
    desc && concat(prefix, 'has-desc'),
    rootHtmlProps?.className
  )

  if (visible === false) {
    return null
  }

  return (
    <EnvProvider isBlue={type === 'info'}>
      <div className={cls} style={{ ...style, ...rootHtmlProps?.style }} {...rest}>
        {icon && <div className={iconPrefix}>{innerIcon}</div>}
        <div className={contentPrefix}>
          {message}
          {desc && <div className={descPrefix}>{desc}</div>}
        </div>
        <div className={concat(prefix, 'spacer')} />
        {innerCloseIcon && <span className={closePrefix} onClick={handleClose}>{innerCloseIcon}</span>}
      </div>
    </EnvProvider>
  )
}

function getIconByType(type: AlertType) {
  switch (type) {
    case 'info':
    default:
      return <InfoIcon />
    case 'success':
      return <CheckCircleIcon />
    case 'error':
      return <CloseCircleIcon />
    case 'warning':
      return <TipIcon />
  }
}

function getCloseIcon(closable?: AlertClosable) {
  if (closable === true) {
    return <CloseIcon />
  }

  if (typeof closable === 'object') {
    return closable.icon ?? <CloseIcon />
  }

  return null
}