import { ScrollView, StyleSheet, TouchableOpacity, Text } from "react-native";
import { ChangePasswordForm } from "../components/change_password_form";
import { useChangePassword } from "../hooks/useChangePassword";
import { LIGHT_THEME } from "../../common/const/theme";

export const ChangePasswordPage = () => {
  const { control, onSubmit } = useChangePassword();
  return (
    <ScrollView
      style={styles.container}
      contentContainerStyle={styles.innerContainer}
    >
      <ChangePasswordForm control={control} />
      {
        //TODO: ADD a modal to show the success message
      }
      <TouchableOpacity style={styles.confirmBtn} onPress={onSubmit}>
        <Text style={styles.confirmBtnText}>Change password</Text>
      </TouchableOpacity>
    </ScrollView>
  );
};

export const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  innerContainer: {
    alignItems: "center",
  },
  confirmBtn: {
    backgroundColor: LIGHT_THEME.color.primary,
    marginTop: 30,
    padding: 10,
    borderRadius: 20,
    height: 40,
    width: "70%",
    justifyContent: "center",
    alignItems: "center",
  },
  confirmBtnText: {
    color: "white",
    fontWeight: "bold",
  },
});
