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

function ConsultationLayout() {
  const [data, , loading, refresh] = useWuhan2020<Clinic>('clinic');
  const [refreshing, setRefreshing] = useState(false);

  const clinics: Clinic[] = data || [];

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

  function renderItem({ item }: { item: Clinic }) {
    return <Consultation item={item} />;
  }

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

ConsultationLayout.navigationOptions = {
  title: '义诊',
};

export default ConsultationLayout;