import { View, Text, Button, ButtonSize } 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 } from "react-native";
import { 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>
          {profileData?.userType == ProfileType.PARENT && <AddChore />}
        </View>
      )}
      {pageIndex == 1 && <FamilyChoresProgress setPageIndex={setPageIndex} />}
      {pageIndex == 2 && <UserChoresProgress setPageIndex={setPageIndex} />}
    </View>
  );
};

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

export default ToDosPage;