import { FlatList } from 'react-native';
import DOCard from '../components/evok/DOCard';
import { RootDrawerScreenProps } from '../models/navigation';
import { useGetEvokState } from '../queries/evok';
import { Text } from 'native-base';

const EvokScreen = ({ navigation }: RootDrawerScreenProps<'Evok'>) => {
  const { data: state } = useGetEvokState();

  return (
    <>
      <Text variant="headlineMedium" className="text-center font-bold">
        This screen is under construction
      </Text>
      {state?.temperature && (
        <Text variant="headlineSmall" className="text-center">
          Current temperature: {state.temperature}°C
        </Text>
      )}
      <FlatList
        className="flex-1"
        data={['1_01', '1_02', '1_03', '1_04']}
        renderItem={({ item }) => (
          <DOCard circuit={item} onPress={() => navigation.navigate('EvokModal')} />
        )}
        numColumns={2}
      />
    </>
  );
};

export default EvokScreen;
