import React, { useState, useEffect } from 'react';
import { IconButton } from 'react-native-paper';
import API from './../../API.js';
import { useSnapshot } from 'valtio';
import GlobalState from '../../contexts/GlobalState.js';
import i18n from "../../i18nMessages.js";

const followProfile = async (profileid, me, setFollowing, setPending) => {
    // Simulates the changes on the DB to speed up the UI
    if (!profileid || profileid == me._id) return false;
    const profile = await API.getUserProfile(profileid);
    if (!me.following) GlobalState.me.following = [];
    GlobalState.me.following.push(profileid);
    setFollowing(true);
    if (!profile.isGroup) { // Follow user profile
        return await API.followProfile(profileid);
    }
    if (!profile.isPrivate) {
        if (!profile.subscribed) profile.subscribed = {};
        profile.subscribed[me._id] = new Date();
    } else {
        setPending(true);
        if (!profile.pending) profile.pending = {};
        profile.pending[me._id] = new Date();
    }
    return await API.subscribeToGroup(profileid)
}

const unfollowProfile = async (profileid, me, setFollowing, setPending) => {
    // Simulates the changes on the DB to speed up the UI
    if (!profileid) return false;
    const profile = await API.getUserProfile(profileid);
    GlobalState.me.following = me.following.filter((pId) => {
        return pId != profileid;
    });
    setFollowing(false);
    setPending(false);
    if (!profile.isGroup) { // For user profiles
        return await API.unfollowProfile(profileid);
    }
    // For groups or courses
    profile.subscribed[profileid] = undefined;
    return await API.unsubscribeToGroup(profileid)
}


let FollowButton = ({ profile }) => {
    const viewer = useSnapshot(GlobalState).me;
    const [following, setFollowing] = useState(false);
    const [pending, setPending] = useState(false);

    useEffect(() => {
        setFollowing(viewer.following.includes(profile._id));
        setPending(profile.pending && profile.pending[viewer._id]);
    }, [profile])


    const type = profile._id ? (!profile.isGroup ? "User" : (profile.isCourse ? "Course" : "Group")) : "User";
    const action = type === 'User' ? (following ? i18n.t("message.unfollow") : i18n.t("message.follow")) :
        (following ? i18n.t("message.unsubscribe") : (pending ? i18n.t("message.pending") : i18n.t("message.subscribe")));


    const toggleFollowThisProfile = () => {
        if (!following) return followProfile(profile._id, viewer, setFollowing, setPending);
        unfollowProfile(profile._id, viewer, setFollowing, setPending);
    }

    return (
        <>
            {
                profile._id && profile._id !== viewer._id ? 
                <IconButton 
                    mode='outlined' 
                    icon={following ? 'person-remove' : 'person-add'}
                    onPress={toggleFollowThisProfile} /> : 
                <></>
            }
        </>
    );
}

export default FollowButton;