import { View, StyleSheet, Image, Text, Button } from "react-native";
import { router } from "expo-router";
import { SignUpForm } from "../components/sign_up_form";
import { LIGHT_THEME } from "../../common/const/theme";
import { useSignUp } from "../hooks/useSignUp";
import { ApiRequestStatus } from "../../common/const/api_request_states";
import { FullPageLoader } from "../../common/components/full_page_loader";
import { ServerConnectionErrorModal } from "../../common/components/modals/server_connection_error";
const loginImage = require("../../../assets/login-image.jpg");

export const SignUpPage = () => {
  const { control, onSubmit, requestStatus, closeErrorModal, isErrorModalVisible } = useSignUp();

  if (requestStatus === ApiRequestStatus.LOADING) {
    return <FullPageLoader />;
  }
  return (
    <View style={styles.mainContainer}>
      <View style={styles.imageContainer}>
        <Image
          source={loginImage}
          style={{ width: "100%", height: "100%" }}
          resizeMode="cover"
        />
      </View>
      <View style={styles.loginContainer}>
        <SignUpForm control={control} onSubmit={onSubmit}/>
      </View>
      <ServerConnectionErrorModal
        isErrorModalVisible={isErrorModalVisible}
        closeErrorModal={closeErrorModal}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  mainContainer: {
    flex: 1,
    backgroundColor: LIGHT_THEME.color.background,
  },
  imageContainer: {
    height: "40%",
    overflow: "hidden",
    borderBottomLeftRadius: 70,
    elevation: 5,
  },
  loginContainer: {
    marginHorizontal: 20,
    marginTop: "-30%",
    marginBottom: 20,
    elevation: 5,
    borderRadius: 10,
    backgroundColor: LIGHT_THEME.color.white,
    height: "70%",
  },
  loginScroll: {
    padding: 20,
    gap: 10,
    justifyContent: "center",
  },
  title: { fontSize: 30, fontWeight: "bold", alignSelf: "center" },
  submitBtn: {
    backgroundColor: "black",
    borderRadius: 5,
    width: "100%",
    padding: 10,
    justifyContent: "center",
    alignItems: "center",
  },
  submitBtnText: {
    color: "white",
    fontSize: 20,
  }
});