import './style.less'

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

import { PAD_RATIO, PHONE_RATIO } from '../common'
import Imager from '../imager'

export interface Props {
  isPad?: boolean
  className?: 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/phone-empty@3x.png',
    2048: 'https://cdn.llscdn.com/phonics-ui/phone-empty@3x.png',
    3072: 'https://cdn.llscdn.com/phonics-ui/phone-empty@3x.png',
    height: `${168 / PAD_RATIO}rem`
  }
]

function reload() {
  window.location.reload()
}

export default function PageFail(props: Props) {
  const { isPad, className } = props
  return (
    <div className={classnames('ph-page-fail', className, { 'is-pad': isPad })}>
      <Imager
        className="fail-image"
        isPad={isPad}
        imgList={isPad ? PAD_IMAGE : PHONE_IMAGE}
      />
      <p className="fail-text">加载失败</p>
      <button className="reload-btn" onClick={reload}>重新加载</button>
    </div>
  )
}