/**
 * @file 滚动加载组件
 */

import React, { RefObject } from 'react'
import { themeable, ThemeProps } from '../../../../theme'
import { localeable, LocaleProps, TranslateFn } from '../../../../locale'
import { Spinner } from '../../../../components'
import { Button } from 'antd';
import './index.scss'

interface InfinteSrollProps extends ThemeProps, LocaleProps {
  loadMore: () => void;
  hasMore: boolean;
  threshold?: number;
}

const InfiniteScrollContent = (props: { hasMore: boolean, translate: TranslateFn, loadMore: () => void }) => {
  const { hasMore, translate: __, loadMore } = props
  return (
    <>
      {hasMore ?
        <>
          <Button onClick={loadMore} type='primary' size='small' style={{ fontSize: 12 }}>加载更多</Button>
          {/* <Spinner size="sm" />
          <span className='infinteSroll-loading'>{__('loading')}</span> */}
        </>
        : (
          <span>{__('NoMore')}</span>
        )}
    </>
  )
}

function isElement(node: Element) {
  const ELEMENT_NODE_TYPE = 1
  return node.nodeType === ELEMENT_NODE_TYPE
}

const getScrollParent = (
  el: Element,
  root: any = window
) => {
  let node = el
  const overflowScrollReg = /scroll|auto|overlay/i

  while (node && node !== root && isElement(node)) {
    const { overflowY } = window.getComputedStyle(node)
    if (overflowScrollReg.test(overflowY)) {
      return node
    }
    node = node.parentNode as Element
  }

  return root
}

export class InfinteSroll extends React.Component<InfinteSrollProps, object> {
  static defaultProps = {
    hasMore: true,
    threshold: 250
  }
  elRef: any
  parent: any
  checkTimer: any

  constructor(props: InfinteSrollProps) {
    super(props)

    this.elRef = React.createRef()
  }

  handleCheck = () => {
    const { loadMore, hasMore } = this.props
    if (!loadMore) return
    clearTimeout(this.checkTimer)
    this.checkTimer = setTimeout(() => {
      if (!hasMore) return
      const element = this.elRef.current
      if (!this.parent) return
      const rect = element.getBoundingClientRect()
      const elementTop = rect.top
      const current = this.parent === window
        ? window.innerHeight
        : this.parent.getBoundingClientRect().bottom
      if (current >= elementTop - 250) {
        loadMore()
      }
    }, 100)

  }

  componentDidMount() {
    const element = this.elRef.current
    if (!element) return
    this.parent = getScrollParent(element)
    this.parent?.addEventListener('scroll', this.handleCheck)
  }

  componentWillUnmount() {
    this.parent?.removeEventListener('scroll', this.handleCheck)
  }

  render() {
    let {
      hasMore,
      translate,
      loadMore
    } = this.props


    return (
      <div ref={this.elRef} className='infinteSroll'>
        <InfiniteScrollContent hasMore={hasMore} translate={translate} loadMore={loadMore} />
      </div>
    )
  }
}

export default themeable(localeable(InfinteSroll))