import { RootDrawerScreenProps } from '../models/navigation';
import { View, ScrollView } from 'native-base';
import { useGetHeatPumpState } from '../queries/heatpump';
import GeneralInfo from '../components/home/GeneralInfo';
import { useEffect } from 'react';
import * as SplashScreen from 'expo-splash-screen';
import { RefreshControl } from 'react-native';
import ModeTabs from '../components/modeSettings/ModeTabs';

const HomeScreen = (_: RootDrawerScreenProps<'Home'>) => {
  const {
    isFetched: isStateFetched,
    isError,
    data: state,
    refetch: refetchState,
    isRefetching,
  } = useGetHeatPumpState();

  useEffect(() => {
    if (isStateFetched && (isError || state?.established_connection === false)) {
      SplashScreen.hideAsync();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isStateFetched, isError]);

  return (
    <ScrollView showsVerticalScrollIndicator={false}>
      <RefreshControl progressViewOffset={-70} refreshing={isRefetching} onRefresh={refetchState} />
      <View className="p-4">
        <GeneralInfo state={state} />
        {state && <ModeTabs state={state} />}
      </View>
    </ScrollView>
  );
};

export default HomeScreen;
