import { useTranslation } from "react-i18next";
import { View } from "react-native";
import MyResult from "../../Components/Result";
import { MyTextButton } from "../../Components/Button";
import { useCallback, useContext } from "react";
import { useFocusEffect } from "@react-navigation/native";
import { AppContext } from "../../utils";

// this screen is shown when no devices are connected to the app
export default function NoDevicesConnectedScreen({ navigation }) {
  const appContext = useContext(AppContext);
  const { t } = useTranslation();

  useFocusEffect(
    useCallback(() => {
      // navigate user to first device in list after he has added a new device
      if (appContext.devices.length > 0) {
        navigation.navigate(appContext.devices[0].displayName);
      }
    }, [appContext.devices])
  );

  return (
    <View style={{ alignItems: "center", margin: 20, gap: 10 }}>
      <MyResult
        text={t("screens.noDevicesConnected.textDescription")}
        iconName={"selection-search"}
      />

      <MyTextButton
        title={t("screens.noDevicesConnected.buttonSearchForNewDevices")}
        actionColor
        onPress={() => navigation.navigate("modalSearchForNewDevices")}
      />
    </View>
  );
}
