wavelength_app/components/home/RelationshipView.tsx

import React, { useEffect, useState } from 'react';
import { Image, StyleSheet, AppState } from 'react-native';
import { ThemedText, ThemedView } from '@/components/theme/Theme';
import { getUser, getRelationship, getPartner, saveRelationshipData } from '@/components/services/SecureStore';
import RequestRelationship from '@/components/home/RequestRelationship';
import TextButton from '@/components/theme/buttons/TextButton';
import { checkRelationshipStatus, updateRelationshipStatus } from '@/constants/APIs';
import type { User, Relationship, RelationshipData } from '@/constants/Types';

const CHECK_TIME = 2; // In minutes

type RelationshipProps = {
  pfpUrl: string | null;
};

const RelationshipView: React.FC<RelationshipProps> = ({ pfpUrl }) => {
  const [status, setStatus] = useState<RelationshipData | null>(null);
  const [user, setUser] = useState<User | null>(null);
  const [showRequestRelationship, setShowRequestRelationship] = useState(false);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchRelationshipStatus();
    setUpPeriodicCheck();
  }, []);

  useEffect(() => {
    if (pfpUrl && user) {
      setUser(prevUser => 
              prevUser ? {...prevUser, pfpUrl: pfpUrl} : null);
    }
  }, [pfpUrl]);

  const handleRequestSent = (relationshipData: RelationshipData) => {
    setStatus(relationshipData);
    setShowRequestRelationship(false);
  };

  const setUpPeriodicCheck = () => {
    let intervalId: NodeJS.Timeout | null = null;
    const startChecking = () => {
      handleCheckRelationshipStatus();
      intervalId = setInterval(handleCheckRelationshipStatus, 60000*CHECK_TIME);
    };
    const stopChecking = () => {
      if (intervalId) {
        clearInterval(intervalId);
        intervalId = null;
      }
    };
    const handleAppStateChange = (nextAppState: string) => {
      if (nextAppState === 'active') startChecking();
      else stopChecking();
    };
    const subscription = AppState.addEventListener('change', handleAppStateChange);
    if (AppState.currentState === 'active') startChecking();
    return () => {
      stopChecking();
      subscription.remove();
    };
  };

  const fetchRelationshipStatus = async () => {
    setLoading(true);
    try {
      const userFromStore: User = await getUser() as User;
      if (!userFromStore) throw new Error('User not found in store.');
      setUser(userFromStore);
      const relationshipFromStore: Relationship = await getRelationship() as Relationship;
      const partnerFromStore: User = await getPartner() as User;
      if (!relationshipFromStore || !partnerFromStore)
        throw new Error('Relationship not found in store.');
      setStatus({
        relationship: relationshipFromStore,
        partner: partnerFromStore,
      });
      await handleCheckRelationshipStatus();
    } catch (error) {
      console.log('Error fetching relationship status:', error);
    } finally {
      setLoading(false);
    }
  };

  const handleCheckRelationshipStatus = async () => {
    try {
      const userFromStore: User = await getUser() as User;
      if (!userFromStore) throw new Error('User not found in store.');
      const relationshipData: RelationshipData = await checkRelationshipStatus(userFromStore.id);
      setStatus(relationshipData);
      await saveRelationshipData(relationshipData);
    } catch (error) {
      console.log('No relationship found or error checking relationship status:', error);
      setStatus(null);
    } finally {
      setLoading(false);
    }
  };

  const handleUpdateRelationshipStatus = async (newStatus: 'accepted' | 'rejected') => {
    if (!status || !status.relationship || !user || !user.id) {
      console.error('No relationship found.');
      return;
    }
    try {
      if (newStatus === 'accepted') {
        const updatedRelationshipData: RelationshipData =
          await updateRelationshipStatus(user.id, newStatus);
        setStatus(updatedRelationshipData);
        await saveRelationshipData(updatedRelationshipData);
      } else {
        await updateRelationshipStatus(user.id, newStatus);
        console.log('Rejected relationship. Relationship deleted.');
        setStatus(null);
      }
    } catch (error) {
      console.error('Error updating relationship status:', error);
    }
  };
  const handleAcceptRequest = () => handleUpdateRelationshipStatus('accepted');
  const handleRejectRequest = () => handleUpdateRelationshipStatus('rejected');

  if (loading) {
    return (
      <ThemedText>
        Loading...
      </ThemedText>
    );
  }

  const renderRelationshipContent = () => {
    if (!status || !status.relationship) {
      // Case 1: Not in a relationship
      return showRequestRelationship ? (
        <RequestRelationship onRequestSent={handleRequestSent} />
      ) : (
        <TextButton
          width={220} height={60} text='Request Relationship' fontSize={18}
          onPress={() => setShowRequestRelationship(true)}
        />
      );
    } else if (!status.relationship.isAccepted && user?.id === status.relationship.requestorId) {
      // Case 2: Pending relationship & our user requested it
      return (
        <>
          <ThemedText style={styles.title}>
            Pending Relationship
          </ThemedText>
          <ThemedView style={styles.profileContainer}>
            <ThemedView style={styles.profileWrapper}>
              <Image
                source={{
                  uri: `${process.env.EXPO_PUBLIC_URL}` +
                    `${status.partner.pfpUrl}`
                }}
                style={styles.profilePicture}
              />
              <ThemedText style={styles.name}>
                {status.partner.fullName}
              </ThemedText>
            </ThemedView>
          </ThemedView>
          <ThemedView style={styles.buttonContainer}>
            <TextButton
              width={100} height={40}
              text='Accept' fontSize={18}
              onPress={handleAcceptRequest}
            />
            <TextButton
              width={100} height={40}
              text='Reject' fontSize={18}
              onPress={handleRejectRequest}
            />
          </ThemedView>
        </>
      );
    } else if (!status.relationship.isAccepted && user?.id !== status.relationship.requestorId) {
      // Case 3: Pending relationship & someone else requested it
      return (
        <>
          <ThemedText style={styles.title}>
            Pending Relationship
          </ThemedText>
          <ThemedView style={styles.profileContainer}>
            <ThemedView style={styles.profileWrapper}>
              <Image
                source={{
                  uri: `${process.env.EXPO_PUBLIC_URL}` +
                    `${status.partner.pfpUrl}`
                }}
                style={styles.profilePicture}
              />
              <ThemedText style={styles.name}>
                {status.partner.fullName}
              </ThemedText>
            </ThemedView>
          </ThemedView>
          <ThemedView style={styles.buttonContainer}>
            <TextButton
              width={100} height={40}
              text='Accept' fontSize={18}
              onPress={handleAcceptRequest}
            />
            <TextButton
              width={100} height={40}
              text='Reject' fontSize={18}
              onPress={handleRejectRequest}
            />
          </ThemedView>
        </>
      );

    } else if (status.relationship.isAccepted) {
      // Case 4: In an accepted relationship
      return (
        <>
          <ThemedText style={styles.title}>
            {status.relationship.title}
          </ThemedText>
          <ThemedView style={styles.profileContainer}>
            {user && (
              <ThemedView style={styles.profileWrapper}>
                <Image
                  source={{ uri: `${process.env.EXPO_PUBLIC_URL}${user.pfpUrl}` }}
                  style={styles.profilePicture}
                />
                <ThemedText style={styles.name}>
                  {user.fullName.split(' ')[0]}
                </ThemedText>
              </ThemedView>
            )}
            {status.partner && (
              <ThemedView style={styles.profileWrapper}>
                <Image
                  source={{ uri: `${process.env.EXPO_PUBLIC_URL}` +
                    `${status.partner.pfpUrl}` }}
                  style={styles.profilePicture}
                />
                <ThemedText style={styles.name}>
                  {status.partner.fullName.split(' ')[0]}
                </ThemedText>
              </ThemedView>
            )}
          </ThemedView>
        </>
      );
    }
  };

  return (
    <ThemedView style={styles.container}>
      {renderRelationshipContent()}
    </ThemedView>
  );
};
export default RelationshipView;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  profileContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 20,
  },
  profileWrapper: {
    alignItems: 'center',
    marginHorizontal: 10,
  },
  profilePicture: {
    width: 100,
    height: 100,
    borderRadius: 50,
    marginBottom: 10,
  },
  name: {
    fontSize: 12,
    fontWeight: 'bold',
  },
    lastChecked: {
    fontSize: 12,
    marginBottom: 10,
  },
  buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    width: '100%',
    marginTop: 20,
  },
});