import React, { useState } from 'react';
import StatusBarSafeLayout from './StatusBarSafeLayout';
import { FlatList, RefreshControl, View } from 'react-native';
import Donation from '../Components/Donation';
import Loader from '../Components/Loader';
import { wait } from '../utils';
import useWuhan2020, { Donation as DonationType } from '../hooks/useWuhan2020';

function DonationLayout() {
  const [data, , loading, refresh] = useWuhan2020<DonationType>('donation');
  const [refreshing, setRefreshing] = useState(false);

  const donations: DonationType[] = data || [];

  function onRefresh() {
    setRefreshing(true);
    refresh();
    wait(2000).then(() => {
      setRefreshing(false);
    });
  }

  function renderItem({ item }: { item: DonationType }) {
    return <Donation item={item} />;
  }

  return (
    <StatusBarSafeLayout>
      <FlatList
        refreshControl={
          <RefreshControl
            tintColor="pink"
            refreshing={refreshing}
            onRefresh={onRefresh}
          />
        }
        keyExtractor={(item: DonationType) => String(item.id)}
        data={donations}
        renderItem={renderItem}
        ListFooterComponent={
          loading ? (
            <View style={{ paddingTop: 20 }}>
              <Loader />
            </View>
          ) : null
        }
      />
    </StatusBarSafeLayout>
  );
}

DonationLayout.navigationOptions = {
  title: '捐款',
};

export default DonationLayout;