import {Button, Text, View} from "react-native-ui-lib";
import React, {useState} from "react";
import HeaderTemplate from "@/components/shared/HeaderTemplate";
import AddChore from "./AddChore";
import ProgressCard from "./ProgressCard";
import ToDosList from "./ToDosList";
import {Dimensions, ScrollView, StyleSheet} from "react-native";
import {TouchableOpacity} from "react-native-gesture-handler";
import {ProfileType, useAuthContext} from "@/contexts/AuthContext";
import FamilyChoresProgress from "./family-chores/FamilyChoresProgress";
import UserChoresProgress from "./user-chores/UserChoresProgress";

const ToDosPage = () => {
    const [pageIndex, setPageIndex] = useState<number>(0);
    const {profileData} = useAuthContext();
    const {width, height} = Dimensions.get("screen");
    const pageLink = (
        <TouchableOpacity onPress={() => setPageIndex(1)}>
            <Text color="#ea156d" style={{fontSize: 14}}>
                View family progress
            </Text>
        </TouchableOpacity>
    );
    return (
        <>
            <View paddingH-25 backgroundColor="#f9f8f7" height={"100%"} width={width}>
                {pageIndex == 0 && (
                    <View>
                        <ScrollView
                            showsVerticalScrollIndicator={false}
                            showsHorizontalScrollIndicator={false}
                        >
                            <View>
                                <HeaderTemplate
                                    message="Here are your To Do's"
                                    isWelcome={true}
                                    link={profileData?.userType == ProfileType.PARENT && pageLink}
                                />
                                {profileData?.userType == ProfileType.CHILD && (
                                    <View marginB-25>
                                        <ProgressCard
                                            children={
                                                <Button
                                                    backgroundColor="transparent"
                                                    onPress={() => setPageIndex(2)}
                                                >
                                                    <Text
                                                        style={{
                                                            textDecorationLine: "underline",
                                                            color: "#05a8b6",
                                                        }}
                                                    >
                                                        View your full progress report here
                                                    </Text>
                                                </Button>
                                            }
                                        />
                                    </View>
                                )}
                                <ToDosList/>
                            </View>
                        </ScrollView>
                    </View>
                )}
                {pageIndex == 1 && <FamilyChoresProgress setPageIndex={setPageIndex}/>}
                {pageIndex == 2 && <UserChoresProgress setPageIndex={setPageIndex}/>}
            </View>
            {
                profileData?.userType == ProfileType.PARENT && <AddChore/>
            }
        </>
    )
        ;
};

const styles = StyleSheet.create({
    linkBtn: {
        backgroundColor: "transparent",
        padding: 0,
    },
});

export default ToDosPage;