import {Image, StyleSheet} from "react-native";
import React, {useRef} from "react";
import {Button, Text, TextField, View} from "react-native-ui-lib";
import Onboarding from "react-native-onboarding-swiper";

const OnboardingFlow = () => {
    const onboardingRef = useRef(null);

    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,
    },
});