import React, { useEffect, useState } from 'react';
import type {Node} from 'react';
import {
  Text,
  TextInput,
  View,
  Button,
} from 'react-native';

const state = {
  "loginScreen": 0,
  "statusFetch": 1,
  "waiting": 2,
  "waking": 3,
  "fullyAwake": 4,
  "default": 0,
}

const StatusFetch = () =>
  <Text style={{ fontSize: 20 }}>Fetching subscriber status</Text>

const Waiting = (activeCount, totalCount, wakeup) =>
  <View>
    <Text style={{ fontSize: 20 }}>{activeCount} / {totalCount} Miners are active</Text>
    <Button onPress={wakeup} title="Wake Up Idle Miners" />
  </View>

const Waking = () =>
  <Text style={{ fontSize: 20 }}>Waking up subscribers</Text>

const FullyAwake = (totalCount) =>
  <Text style={{ fontSize: 20 }}>All {totalCount} Miners are active</Text>

const StatusView = ({username, appStatus, activeCount, totalCount, wakeup}) => {
  const content = () => {
    if (appStatus == state.statusFetch)
      return StatusFetch();
    if (appStatus == state.waiting)
      return Waiting(activeCount, totalCount, wakeup);
    if (appStatus == state.waking)
      return Waking();
    if (appStatus == state.fullyAwake)
      return FullyAwake(totalCount);
    return null;
  }
  return (
    <View>
      <Text>User: {username}</Text>
      {content()}
    </View>
  )
}

export default StatusView;
export {
  state as appState
};