import React from 'react'
import { UI } from '@hyext/hy-ui'
import './index.hycss'
import FlexContianer, {FlexContianerProps} from '../FlexContianer'

const { Image, Text } = UI

export type AbnorProps = {
  type: 'empty' | 'loading' | 'error',
  desc?: string | string[]
}

const AbnorRenderMap = {
  'empty': {
    img: require('./abnor-empty.png'),
    className: 'empty-img'
  },
  'error': {
    img: require('./abnor-empty.png'),
    className: 'empty-img'
  },
  'loading': {
    img: require('./loading.webp'),
    className: 'loading-img',
  }
}


function Abnor(props: FlexContianerProps & AbnorProps) {
  const { type, desc, ...rest } = props
  const abnorRenderInfo = AbnorRenderMap[type as 'empty']

  return (
    <FlexContianer {...rest}>
      <Image src={abnorRenderInfo.img} className={`abnormal-img ${abnorRenderInfo.className}`}></Image>
      {
        Array.isArray(desc)
          ? desc.map((text, i) => <Text key={i} className="abnormal-text">{text}</Text>)
          : <Text className="abnormal-text">{desc}</Text>
      }
    </FlexContianer>
  )
}

export default Abnor
