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 NotificationType = 'info' | 'error' | 'success' | 'warning'
export type NotificationProps = {
  /**
   * @default info
   */
  type?: NotificationType
  message: ReactNode
  /**
 * 是否可以关闭
 * @default true
 */
  closable?: boolean
  onClose?(): void
  className?: string
  style?: CSSProperties
  /**
   * 根元素的 html 属性
   */
  rootHtmlProps?: WithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
}

export default function Notification(props: NotificationProps) {
  const { className, message, type = 'info', closable = true, onClose, rootHtmlProps, style } = props
  const [visible, setVisible] = useState(true)
  const prefix = usePrefix('notification')
  const typePrefix = concat(prefix, type)
  const iconPrefix = concat(prefix, 'icon')
  const closePrefix = concat(prefix, 'close')

  const innerIcon = getIconByType(type)

  const cls = classnames(
    className, prefix, typePrefix, rootHtmlProps?.className
  )

  function handleClose() {
    setVisible(false)
    onClose?.()
  }

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

  return (
    <EnvProvider isBlue={type === 'info'}>
      <div {...rootHtmlProps} className={cls} style={{ ...style, ...rootHtmlProps?.style }}>
        <div className={iconPrefix}>{innerIcon}</div>
        {message}
        {closable && (
          <span className={closePrefix} onClick={handleClose}><CloseIcon /></span>
        )}
      </div>
    </EnvProvider>
  )
}

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