import './style.less'

import classnames from 'classnames'
import React from 'react'

import { PAD_RATIO, PHONE_RATIO } from '../common'
import Imager from '../imager'
import parseParams from '../parse-params'

export interface Props {
  isPad?: boolean
  className?: string
  text?: string
}

const PHONE_IMAGE = [
  {
    375: 'https://cdn.llscdn.com/phonics-ui/phone-empty.png',
    750: 'https://cdn.llscdn.com/phonics-ui/phone-empty@2x.png',
    1125: 'https://cdn.llscdn.com/phonics-ui/phone-empty@3x.png',
    height: `${168 / PHONE_RATIO}rem`
  }
]

const PAD_IMAGE = [
  {
    1024: 'https://cdn.llscdn.com/phonics-ui/pad-empty.png',
    2048: 'https://cdn.llscdn.com/phonics-ui/pad-empty@2x.png',
    3072: 'https://cdn.llscdn.com/phonics-ui/pad-empty@3x.png',
    height: `${207 / PAD_RATIO}rem`
  }
]

const DEFAULT_TEXT = '暂无数据';

export default function EmptyRecord(props: Props) {
  const { isPad, className, text } = props
  const emptyText = text || parseParams().text || DEFAULT_TEXT
  return (
    <div className={classnames('ph-empty-record', className, { 'is-pad': isPad })}>
      <Imager
        className="empty-image"
        isPad={isPad}
        imgList={isPad ? PAD_IMAGE : PHONE_IMAGE}
      />
      <p className="empty-text">{emptyText}</p>
    </div>
  )
}