import { SlideControl } from "../../common/components/slide_control";
import { View, StyleSheet } from "react-native";
import { ApiRequestStatus } from "../../common/const/api_request_states";
import { FullPageLoader } from "../../common/components/full_page_loader";
import { useResetPasswordControl } from "../hooks/useResetPasswordControl";

export const ResetPasswordPage = () => {
  const {
    onNext,
    onFinish,
    slide,
    isFirst,
    isLast,
    onPrevious,
    requestStatus,
  } = useResetPasswordControl();
  if (requestStatus === ApiRequestStatus.LOADING) {
    return <FullPageLoader />;
  }
  return (
    <View style={styles.mainContainer}>
      {slide}
      <SlideControl
        onFinish={onFinish}
        onNext={onNext}
        onPrevious={onPrevious}
        isFirst={isFirst}
        isLast={isLast}
      ></SlideControl>
    </View>
  );
};

const styles = StyleSheet.create({
  mainContainer: {
    flex: 1,
    alignItems: "center",
    padding: 20,
  },
});
