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

import axios from 'axios';

import AsyncStorage from '@react-native-async-storage/async-storage';

import LoginView from "./views/LoginView";
import StatusView, { appState } from "./views/StatusView";

import { decryptor } from "./Utils";
import pi from "./Pi";
import farm from "./Farm";

const App: () => Node = () => {
  const [errorMessage, setErrorMessage] = useState("");
  const [username, setUsername] = useState("");
  const [userInfo, setUserInfo] = useState({
    username: "",
    subscribers: [],
  });

  const [activeCount, setActiveCount] = useState(0);
  const [totalCount, setTotalCount] = useState(0);

  // ["loginScreen", "statusFetch", "waiting", "waking", "fullyAwake"]
  const [appStatus, setAppStatus] = useState(appState.default);

  const fetchUserData = async () => {
    const userInfo = await farm.GetUserInfo(username);
    const statusChecker = userInfo.subscribers.map(sub => {
      return pi.StatusChecker(sub);
    });
    const botStatuses = await Promise.all(statusChecker);
    const botActive = botStatuses.reduce((acc, s) => s ? acc + 1 : acc, 0);

    setUserInfo(userInfo);
    setTotalCount(botStatuses.length);
    setActiveCount(botActive);

    return botActive == botStatuses.length;
  };

  const wakeup = () => {
    setAppStatus(appState.waking)
    const waker = userInfo.subscribers.map(sub => {
      return pi.Waker(sub);
    });
    Promise.all(waker)
      .then((botStatuses) => {
        setErrorMessage("")
        const botActive = botStatuses.reduce((acc, s) => s ? acc + 1 : acc, 0)
        setActiveCount(botActive);
        if (botActive == botStatuses.length) {
          setAppStatus(appState.fullyAwake)
        } else {
          setAppStatus(appState.waiting)
        }
      })
      .catch((err) => {
        setErrorMessage("Cannot Wake Up")
      })
  }

  const login = () => {
    setAppStatus(appState.statusFetch)
    fetchUserData()
      .then((awaken) => {
        setErrorMessage("")
        if (awaken) {
          setAppStatus(appState.fullyAwake)
        } else {
          setAppStatus(appState.waiting)
        }
        AsyncStorage.setItem("username", username)
          .catch((_) => {})
      })
      .catch((err) => {
        setErrorMessage("Cannot fetch user information")
      })
  }

  const logout = () => {
    setUsername("");
    setUserInfo({
      username: "",
      subscribers: [],
    });
    setAppStatus(appState.loginScreen)
    AsyncStorage.removeItem("username", null);
  }

  const tryGetUser = () => {
    AsyncStorage.getItem("username")
    .then((localUser) => {
      if (localUser !== null) {
        setUsername(localUser);
      }
    })
    .catch((_) => {});
  }

  useEffect(tryGetUser, []);

  return (
    <SafeAreaView style={{
      flex: 1,
    }}>
      <View style={{
        flex: 1,
        flexDirection: "column",
        justifyContent: "center",
      }}>
      {
        (appStatus == appState.loginScreen)
          ? <View style={{
              flex: 0,
              alignItems: "center",
            }}>
              <LoginView username={username} login={login} setUsername={setUsername}/>
            </View>
          : <View style={{
              flex: 0,
              alignItems: "center",
            }}>
              <StatusView
                username={username}
                appStatus={appStatus}
                activeCount={activeCount}
                totalCount={totalCount}
                wakeup={wakeup}
              />
              <Button
                onPress={logout}
                title="Logout"
              />
            </View>
      }
      { errorMessage === ""
        ? null
        : <Text style={{
            textAlign: "center",
            marginTop: 40,
            fontSize: 20,
            color: "red",
          }}>{errorMessage}
          </Text>
      }
      </View>
    </SafeAreaView>
  );
};

export default App;