import React, {useCallback, useState} from 'react';
import {StyleSheet, Text} from 'react-native';
import {
  PullToRefreshFooterProps,
  PullToRefreshOffsetChangedEvent,
  PullToRefreshStateChangedEvent,
  PullToRefreshStateIdle,
  PullToRefreshStateRefreshing,
} from '../types';
import {PullToRefreshFooter} from './native';

export function DefaultPullToRefreshFooter(props: PullToRefreshFooterProps) {
  const {onRefresh, refreshing, noMoreData} = props;

  const [text, setText] = useState('上拉加载更多');

  const onStateChanged = useCallback((event: PullToRefreshStateChangedEvent) => {
    const state = event.nativeEvent.state;
    if (state === PullToRefreshStateIdle) {
      setText('上拉加载更多');
    } else if (state === PullToRefreshStateRefreshing) {
      setText('正在加载更多...');
    } else {
      setText('松开加载更多');
    }
  }, []);

  const onOffsetChanged = useCallback((event: PullToRefreshOffsetChangedEvent) => {
    console.log('refresh footer offset', event.nativeEvent.offset);
  }, []);

  return (
    <PullToRefreshFooter
      style={styles.container}
      manual
      onOffsetChanged={onOffsetChanged}
      onStateChanged={onStateChanged}
      onRefresh={onRefresh}
      refreshing={refreshing}
      noMoreData={noMoreData}>
      <Text style={styles.text}>{noMoreData ? '没有更多数据了' : text}</Text>
    </PullToRefreshFooter>
  );
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    backgroundColor: 'red',
  },
  text: {
    paddingVertical: 16,
    fontSize: 17,
    color: 'white',
  },
});