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

import { useLangData, usePrefix } from '../ConfigProvider'
import FileImage from './images/File'
import EmailImage from './images/Email'
import NetworkImage from './images/Network'
import NotFoundImage from './images/NotFound'
import PictureImage from './images/Picture'
import VideoImage from './images/Video'
import WorkingImage from './images/Working'
import ChartImage from './images/Chart'
import { concat } from '../utils'

export type EmptyImage = 'file' | 'email' | 'picture' | 'video' | 'chart' | 'network' | 'working' | 'notfound'
export type EmptyProps = {
  /**
   * 空状态图片
   * @default 'file'
   */
  image?: EmptyImage | null
  title?: string
  subtitle?: string
  className?: string
  style?: CSSProperties
}

export function Empty(props: EmptyProps) {
  const { image = 'file', title, subtitle, className, style } = props
  const langData = useLangData('empty')
  const prefix = usePrefix('empty')

  return (
    <div className={classnames(prefix, subtitle && concat(prefix, 'has', 'subtitle'), className)} style={style}>
      {image && <span className={concat(prefix, 'image')}>{getImageComponent(image)}</span>}
      <span className={concat(prefix, 'title')}>{title || langData.titleText}</span>
      {subtitle && <span className={concat(prefix, 'subtitle')}>{subtitle}</span>}
    </div>
  )
}

function getImageComponent(image?: EmptyImage) {
  if (image === 'file') return <FileImage />
  if (image === 'email') return <EmailImage />
  if (image === 'network') return <NetworkImage />
  if (image === 'picture') return <PictureImage />
  if (image === 'notfound') return <NotFoundImage />
  if (image === 'video') return <VideoImage />
  if (image === 'working') return <WorkingImage />
  if (image === 'chart') return <ChartImage />
  return <FileImage />
}