import AsyncStorage from '@react-native-community/async-storage';
import React, {createContext, useEffect, useState} from 'react';
import {Value} from 'react-native-reanimated';
import {INTEGRATED_SOCIAL_LIST} from '../../constants';
import {
  loadAvatar,
  loadCover,
  loadProfileInfo,
  loadSocialPosts,
  loadMoments,
  loadFollowers,
  loadFollowing,
} from '../../services';
import {
  ProfileType,
  SocialAccountType,
  ProfilePreviewType,
  UserType,
  MomentType,
} from '../../types';

interface ProfileContextProps {
  user: UserType;
  profile: ProfileType;
  avatar: string | null;
  cover: string | null;
  socialAccounts: Record<string, SocialAccountType>;
  socialsNeedUpdate: (_: string[]) => void;
  moments: MomentType[];
  followers: ProfilePreviewType[];
  following: ProfilePreviewType[];
  followersNeedUpdate: boolean;
  updateFollowers: (value: boolean) => void;
}
const NO_USER: UserType = {
  userId: '',
  username: '',
};
const NO_PROFILE: ProfileType = {
  biography: '',
  website: '',
  name: '',
};

const NO_SOCIAL_ACCOUNTS: Record<string, SocialAccountType> = {
  Instagram: {posts: []},
  Facebook: {posts: []},
  Twitter: {posts: []},
};

export const ProfileContext = createContext<ProfileContextProps>({
  user: NO_USER,
  profile: NO_PROFILE,
  avatar: null,
  cover: null,
  socialAccounts: NO_SOCIAL_ACCOUNTS,
  socialsNeedUpdate: () => {},
  moments: [],
  followers: [],
  following: [],
  followersNeedUpdate: true,
  updateFollowers: () => {},
});

/**
 * This is the context provider for user profiles that the logged in user wants to see
 * The ProfileProviderProps is used to initialise data as soon as the component is initialised.
 */

type ProfileProviderProps = {
  uname: string;
  uId: string;
};

const ProfileProvider: React.FC<ProfileProviderProps> = ({
  children,
  uId,
  uname,
}) => {
  const [user, setUser] = useState<UserType>({userId: uId, username: uname});
  const [profile, setProfile] = useState<ProfileType>(NO_PROFILE);
  const [avatar, setAvatar] = useState<string | null>(null);
  const [cover, setCover] = useState<string | null>(null);
  const [newMomentsAvailable, setNewMomentsAvailable] = useState<boolean>(true);
  const [socialAccounts, setSocialAccounts] = useState<
    Record<string, SocialAccountType>
  >(NO_SOCIAL_ACCOUNTS);
  const [moments, setMoments] = useState<Array<MomentType>>([]);
  const [followers, setFollowers] = useState<Array<ProfilePreviewType>>([]);
  const [following, setFollowing] = useState<Array<ProfilePreviewType>>([]);
  const [followersNeedUpdate, setFollowersNeedUpdate] = useState<boolean>(true);
  // Default update all integrated social lists on start
  const [socialsNeedUpdate, setSocialsNeedUpdate] = useState<string[]>([
    ...INTEGRATED_SOCIAL_LIST,
  ]);

  const {userId} = user;
  useEffect(() => {
    if (!userId) {
      return;
    }
    const loadData = async () => {
      try {
        const token = await AsyncStorage.getItem('token');
        if (!token) {
          setUser(NO_USER);
          return;
        }
        loadProfileInfo(token, userId, setProfile);
        loadAvatar(token, userId, setAvatar);
        loadCover(token, userId, setCover);
      } catch (err) {
        console.log(err);
      }
    };
    loadData();
  }, [userId]);

  useEffect(() => {
    const loadNewMoments = async () => {
      try {
        const token = await AsyncStorage.getItem('token');
        if (!token) {
          setUser(NO_USER);
          return;
        }
        const newMoments = await loadMoments(userId, token);
        if (newMoments) {
          setMoments(newMoments);
        }
        setNewMomentsAvailable(false);
      } catch (error) {
        console.log(error);
      }
    };
    if (newMomentsAvailable && userId) {
      loadNewMoments();
    }
  }, [newMomentsAvailable, userId]);

  useEffect(() => {
    const loadNewFollowers = async () => {
      try {
        const token = await AsyncStorage.getItem('token');
        if (!token) {
          setUser(NO_USER);
          return;
        }
        loadFollowers(userId, token, setFollowers);
        loadFollowing(userId, token, setFollowing);
        setFollowersNeedUpdate(false);
      } catch (error) {
        console.log(error);
      }
    };
    if (followersNeedUpdate && userId) {
      loadNewFollowers();
    }
  }, [followersNeedUpdate, userId, followers, following]);

  useEffect(() => {
    if (socialsNeedUpdate.length > 0 && userId) {
      for (let social of socialsNeedUpdate) {
        loadSocialPosts(userId, social).then((accountData) => {
          /**
           * Please use the following syntax when updating an object, fixing this problem broke our head. LOLs
           * ref1 : https://stackoverflow.com/questions/56423256/set-dynamic-key-in-state-via-usestate-react-hooks
           * ref2: https://stackoverflow.com/questions/43638938/updating-an-object-with-setstate-in-react/43639228
           * The spread operator {...} helps us make a simple copy of the object
           * And form there on we can use the [] to specify the dynamically constructed key and set its value.
           */
          setSocialAccounts((prevSocialAccounts) => ({
            ...prevSocialAccounts,
            [social]: accountData,
          }));
          console.log('Updated posts data', social);
        });
      }
      setSocialsNeedUpdate([]);
    }
  }, [socialAccounts, socialsNeedUpdate, userId]);

  return (
    <ProfileContext.Provider
      value={{
        user,
        profile,
        avatar,
        cover,
        socialAccounts,
        moments,
        followers,
        following,
        followersNeedUpdate,
        socialsNeedUpdate: (socials: string[]) => {
          setSocialsNeedUpdate(socials);
        },
        updateFollowers: (value) => {
          setFollowersNeedUpdate(value);
        },
      }}>
      {children}
    </ProfileContext.Provider>
  );
};

export default ProfileProvider;