import { Image } from "react-native";
import React, { useRef } from "react";
import { View, Text, Button, TextField } from "react-native-ui-lib";
import Onboarding from "react-native-onboarding-swiper";
import { StyleSheet } from "react-native";
import { useAuthContext } from "@/contexts/AuthContext";
import { useSignUp } from "@/hooks/firebase/useSignUp";
const OnboardingFlow = () => {
  const onboardingRef = useRef(null);
  const { mutateAsync: signUp } = useSignUp();

  return (
    <Onboarding
      showPagination={false}
      ref={onboardingRef}
      containerStyles={{ backgroundColor: "#f9f8f7" }}
      imageContainerStyles={{
        paddingBottom: 0,
        paddingTop: 0,
      }}
      pages={[
        {
          backgroundColor: "#f9f8f7",
          image: (
            <Image
              source={require("../../../assets/images/splash-clock.png")}
              height={10}
              width={10}
            />
          ),
          title: <Text text30>Welcome to Cally</Text>,
          subtitle: (
            <View paddingB-250 marginH-20 spread>
              <Text text50R>Lightening Mental Loads, One Family at a Time</Text>
              <Button
                label="Continue"
                style={{ backgroundColor: "#fd1775" }}
                onPress={() => onboardingRef?.current?.goToPage(1, true)}
              />
            </View>
          ),
        },
        {
          backgroundColor: "#f9f8f7",
          title: <Text>Get started with Cally</Text>,
            image: (
                <Image
                    source={require("../../../assets/images/splash-clock.png")}
                    height={10}
                    width={10}
                />
            ),
          subtitle: (
            <View
              style={{
                marginBottom: "auto",
                width: "100%",
              }}
            >
              <View marginH-30>
                {/*<TextField style={styles.textfield} placeholder="First name" />*/}
                {/*<TextField style={styles.textfield} placeholder="Last name" />*/}
                <TextField style={styles.textfield} placeholder="Email" />
                <TextField style={styles.textfield} placeholder="Password" />
                <Button
                  label="Login"
                  backgroundColor="#ea156c"
                  onPress={() => {
                    console.log("Onboarding Done");
                  }}
                />
              </View>
            </View>
          ),
        },
      ]}
    />
  );
};

export default OnboardingFlow;

const styles = StyleSheet.create({
  textfield: {
    backgroundColor: "white",
    marginVertical: 10,
    padding: 30,
    height: 45,
    borderRadius: 50,
  },
});