import React from 'react'
import { StyleSheet } from 'react-native'
import { PullToRefreshFooterProps, PullToRefreshHeaderProps, PullToRefreshProps } from '../types'
import { DefaultPullToRefreshFooter } from '../Footer'
import { DefaultPullToRefreshHeader } from '../Header'
import { NativePullToRefresh } from './native'

export class PullToRefresh extends React.Component<PullToRefreshProps> {
  private static DefaultHeader: React.ComponentType<PullToRefreshHeaderProps> = DefaultPullToRefreshHeader
  private static DefaultFooter: React.ComponentType<PullToRefreshFooterProps> = DefaultPullToRefreshFooter

  static setDefaultHeader(Header: React.ComponentType<PullToRefreshHeaderProps>) {
    PullToRefresh.DefaultHeader = Header ?? DefaultPullToRefreshHeader
  }

  static setDefaultFooter(Footer: React.ComponentType<PullToRefreshFooterProps>) {
    PullToRefresh.DefaultFooter = Footer ?? DefaultPullToRefreshFooter
  }

  renderHeader() {
    const { onRefresh, refreshing, header } = this.props

    if (header) {
      return header
    }

    if (onRefresh) {
      return <PullToRefresh.DefaultHeader onRefresh={onRefresh} refreshing={!!refreshing} />
    }

    return null
  }

  renderFooter() {
    const { onLoadMore, loadingMore, noMoreData, footer } = this.props
    if (footer) {
      return footer
    }

    if (onLoadMore) {
      return <PullToRefresh.DefaultFooter onRefresh={onLoadMore} refreshing={!!loadingMore} noMoreData={noMoreData} />
    }

    return null
  }

  render() {
    const { children, style } = this.props
    return (
      <NativePullToRefresh style={[styles.fill, style]}>
        {this.renderHeader()}
        {children}
        {this.renderFooter()}
      </NativePullToRefresh>
    )
  }
}

const styles = StyleSheet.create({
  fill: {
    flex: 1,
  },
})