import { Image, Text, View } from "react-native-ui-lib";
import React, { useEffect, useState } from "react";
import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
import { StyleSheet } from "react-native";
import { colorMap } from "@/constants/colorMap";
import { useAtom } from "jotai";
import { isFamilyViewAtom } from "../pages/calendar/atoms";
import { useGetChildrenByParentId } from "@/hooks/firebase/useGetChildrenByParentId";
import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
import { UserProfile } from "@/hooks/firebase/types/profileTypes";
import { child } from "@react-native-firebase/storage";
import CachedImage from 'expo-cached-image'

const HeaderTemplate = (props: {
  message: string;
  isWelcome: boolean;
  children?: React.ReactNode;
  link?: React.ReactNode;
  isCalendar?: boolean;
  isToDos?: boolean;
  isBrainDump?: boolean;
  isGroceries?: boolean;
}) => {
  const { user, profileData } = useAuthContext();

  const { data: members } = useGetFamilyMembers();
  const [children, setChildren] = useState<UserProfile[]>([]);
  const [isFamilyView] = useAtom(isFamilyViewAtom);

  const headerHeight: number =
    (props.isCalendar && 65.54) ||
    (props.isToDos && 84) ||
    (props.isGroceries && 72.09) ||
    65.54;

  const styles = StyleSheet.create({
    pfp: {
      height: headerHeight,
      aspectRatio: 1,
      borderRadius: 22,
      overflow: "hidden",
      marginRight: 20,
      backgroundColor: profileData?.eventColor ?? colorMap.pink,
    },
    pfpTxt: {
      fontFamily: "Manrope_500Medium",
      fontSize: 30,
      color: "white",
    },
    childrenPfpArr: {
      width: 65.54,
      position: "absolute",
      bottom: -12.44,
      left: (children.length > 3 && -9) || 0,
      height: 27.32,
    },
    childrenPfp: {
      aspectRatio: 1,
      width: 27.32,
      backgroundColor: "#fd1575",
      borderRadius: 50,
      position: "absolute",
      borderWidth: 2,
      borderColor: "#f2f2f2",
    },
    bottomMarg: {
      marginBottom: isFamilyView ? 30 : 15,
    },
  });

  useEffect(() => {
    if (members) {
      const childrenMembers = members.filter(
        (member) => member.userType === ProfileType.CHILD
      );
      setChildren(childrenMembers);
    }
  }, []);

  return (
    <View row centerV marginV-15 style={styles.bottomMarg}>
      {profileData?.pfp ? (
        <View>
          <CachedImage source={{ uri: profileData.pfp,  }} style={styles.pfp}  cacheKey={profileData.pfp}/>
          {isFamilyView && props.isCalendar && (
            <View style={styles.childrenPfpArr} row>
              {children?.slice(0, 3).map((child, index) => {
                return child.pfp ? (
                  <Image
                    source={{ uri: child.pfp }}
                    style={[styles.childrenPfp, { left: index * 19 }]}
                  />
                ) : (
                  <View
                    style={[styles.childrenPfp, { left: index * 19 }]}
                    center
                  >
                    <Text style={{ color: "white" }}>
                      {child?.firstName?.at(0)}
                      {child?.firstName?.at(1)}
                    </Text>
                  </View>
                );
              })}
              {children?.length > 3 && (
                <View style={[styles.childrenPfp, { left: 3 * 19 }]} center>
                  <Text style={{ color: "white", fontFamily: "Manrope_600SemiBold", fontSize: 12 }}>+{children.length - 3}</Text>
                </View>
              )}
            </View>
          )}
        </View>
      ) : (
        <View style={styles.pfp} center>
          <Text style={styles.pfpTxt}>
            {user?.email?.at(0)}
            {user?.email?.at(1)}
          </Text>
        </View>
      )}
      <View gap-3>
        {props.isWelcome && (
          <Text
            text70L
            style={{
              fontSize: 19,
              fontFamily: "Manrope_400Regular",
            }}
          >
            Welcome, {profileData?.firstName}!
          </Text>
        )}
        <Text
          text70B
          style={{ fontSize: 18, fontFamily: "Manrope_600SemiBold" }}
        >
          {props.message}
        </Text>
        {props.children && <View>{props.children}</View>}
        {props.link && <View marginT-8>{props.link}</View>}
      </View>
    </View>
  );
};

export default HeaderTemplate;
