import { View, StyleSheet, Text, ScrollView } from "react-native";
import { CodeForm } from "../components/code_form";
import { useVerifyAccount } from "../hooks/useVerifyAccount";
import { ApiRequestStatus } from "../../common/const/api_request_states";
import { FullPageLoader } from "../../common/components/full_page_loader";
import { FloatingEndActionButton } from "../../common/components/floating_end_action_button";

export const VerifyScreen = () => {
  const { setValue, requestStatus, onSubmit, getNewResetCode } =
    useVerifyAccount();

  if (requestStatus === ApiRequestStatus.LOADING) {
    return <FullPageLoader />;
  }

  return (
    <ScrollView
      style={styles.container}
      contentContainerStyle={styles.innerContainer}
    >
      <CodeForm setValue={setValue} getNewResetCode={getNewResetCode} />
      <FloatingEndActionButton onPress={onSubmit} title="Verificar Cuenta" />
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    height: "100%",
  },
  innerContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  title: {
    fontSize: 20,
    fontWeight: "bold",
  },
});
