import classnames from 'classnames'
import React from 'react'
import ReactDOM from 'react-dom'
import { PAD_RATIO, PHONE_RATIO } from '../common'
import Imager from '../imager'
import './style.less'

const PHONE_IMAGE = [
  {
    375: 'https://cdn.llscdn.com/sprout/assets/invalidName_phone.png',
    750: 'https://cdn.llscdn.com/sprout/assets/invalidName_phone@2x.png',
    1125: 'https://cdn.llscdn.com/sprout/assets/invalidName_phone@3x.png',
    height: `${62 / PHONE_RATIO}rem`
  }
]

const PAD_IMAGE = [
  {
    1024: 'https://cdn.llscdn.com/sprout/assets/invalidName_pad.png',
    2048: 'https://cdn.llscdn.com/sprout/assets/invalidName_pad@2x.png',
    3072: 'https://cdn.llscdn.com/sprout/assets/invalidName_pad@3x.png',
    height: `${68 / PAD_RATIO}rem`
  }
]

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

export function PageLoading (props?: Props) {
  const { isPad = false, className = '' } = props || {}
  return (
    <div className={classnames('ph-page-loading', className, { 'is-pad': isPad })}>
      <Imager
        className="loading-image"
        isPad={isPad}
        imgList={isPad ? PAD_IMAGE : PHONE_IMAGE}
      />
      <div className="loading-text">努力加载中</div>
    </div>
  )
}

export default function (props?: Props) {
  let loadingEl: HTMLDivElement | null
  return {
    show() {
      const div = document.createElement('div')
      document.body.appendChild(div)
      ReactDOM.render(<PageLoading {...props} />, div)
      loadingEl = div
    },
    hide() {
      if (loadingEl) document.body.removeChild(loadingEl);
      loadingEl = null;
    }
  }
}