import React, { useState, useEffect } from "react";
import { StyleSheet, SafeAreaView, Text, TextInput, View, ScrollView, Flatlist, TouchableOpacity } from "react-native";
import { Button} from 'native-base';
import { useTheme } from '@react-navigation/native';
import MaterialTabs from 'react-native-material-tabs';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import CreateCommunity from "./CreateCommunity";
import CommunityContent from "./CommunityContent";

function Communities({navigation, route}) {
    const { colors } = useTheme();
    const [selectedTab, setSelectedTab] = useState(0);
    const [comms, setComms] = useState([])
    const [myComms, setMyComms] = useState([])
    const [user, setUser] = useState(route.params.username)

    useEffect(() => {
        getComm();
        getMyComm(user);
    }, [selectedTab === 0]);

    async function getComm(){
        await fetch(localhost+'/community', {
            method: "GET",
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            }
        })
        .then(function(response) {
            if (response.status === 200 || response.status === 201) {
                // Successful GET
                // Set Fields to correct values
                response.json().then(function(data) {
                    setComms(data.map(item => ({
                            ComName: item.ComName,
                            owner: item.owner,
                            admins: item.admins,
                            members: item.members,
                            description: item.description
                        }))
                    )
                });
                console.log(comms)
            } else {
                console.log('issue getComm. Status Code: ' + response.status);
            }
        })
        .catch(function(err) {
            console.log('Fetch Error :-S', err);
        });
    }

    async function getMyComm(name){
        await fetch(localhost+'/community/'+name, {
            method: "GET",
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'Cache-Control': 'no-store, no-cache, must-revalidate, proxy-revalidate'
            }
        })
        .then(function(response) {
            if (response.status === 200 || response.status === 201) {
                // Successful GET
                // Set Fields to correct values
                response.json().then(function(data) {
                    setMyComms(data.map(item => ({
                            ComName: item.ComName,
                            owner: item.owner,
                            admins: item.admins,
                            members: item.members
                        }))
                    )
                });
                console.log(myComms)
            } else {
                console.log('issue getMyComm. Status Code: ' + response.status);
            }
        })
        .catch(function(err) {
            console.log('Fetch Error :-S', err);
        });
    }

    function delComm(name){
        fetch(localhost+'/community/' + name, {
            method: "DELETE",
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'Cache-Control': 'no-store, no-cache, must-revalidate, proxy-revalidate'
            }
        })
        .then(
            function(response) {
                if (response.status === 200 || response.status === 201) {
                    // Successful POST
                    response.json().then(function(data) {
                        console.log(data);
                    })
                } else {
                    // Examine the text in the response
                    console.log('issue in delComm. Status code: '+ response.status);
                }
            }
        )
        .catch(function(err) {
            console.log('Fetch Error :-S', err);
        });
    }

    function leaveComm(comname, name){
        fetch(localhost+'/community/pullmember/' + comname + "/" + name, {
            method: "PUT",
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'Cache-Control': 'no-store, no-cache, must-revalidate, proxy-revalidate'
            }
        })
        .then(
            function(response) {
                if (response.status === 200 || response.status === 201) {
                    // Successful POST
                    response.json().then(function(data) {
                        console.log(data);
                    })
                } else {
                    // Examine the text in the response
                    console.log('issue in leaveComm. Status code: '+ response.status);
                }
            }
        )
        .catch(function(err) {
            console.log('Fetch Error :-S', err);
        });
    }

    function joinComm(comname,name){
        fetch(localhost+'/community/pushmember/' + comname + "/" + name, {
            method: "PUT",
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'Cache-Control': 'no-store, no-cache, must-revalidate, proxy-revalidate'
            }
        })
        .then(
            function(response) {
                if (response.status === 200 || response.status === 201) {
                    // Successful POST
                    response.json().then(function(data) {
                        console.log(data);
                    })
                } else {
                    // Examine the text in the response
                    console.log('issue in joinComm. Status code: '+ response.status);
                }
            }
        )
        .catch(function(err) {
            console.log('Fetch Error :-S', err);
        });
    }

    function canJoin(owner,comname,members) {
        if (owner == user) {
            return <Icon name='delete' color="#5c5a55" size={20} onPress={()=>delComm(comname)}/>
        }
        else if (members.includes(user)) {
            return <Icon name='minus' color="#5c5a55" size={20} onPress={()=>leaveComm(comname,user)}/>
        }
        else {
            console.log("here")
            return <Icon name='plus' color="#5c5a55" size={20} onPress={()=>joinComm(comname,user)}/>
        }
    }

    // function canJoin(name, comname) {
    //     return <Icon name='plus' color="#5c5a55" size={20}/>
    // }

    function handleCreateCommunity(){
        navigation.navigate('CreateCommunity', {
            user: user
        });
    }

    function handleNavCommunity(com) {
        navigation.navigate('CommunityContent', {
            user: user,
            comName: com
        });
        console.log(com)
    }

    return (
        <ScrollView>
        <SafeAreaView style={ [styles.screen, {flexDirection:"column"}] }>
            <Text style={ [styles.title, {color: colors.text}] }>Communities</Text>
            <MaterialTabs
                items={["All Communities", "My Communities"]}
                selectedIndex={selectedTab}
                onChange={setSelectedTab}
                barColor='#ffffff'
                indicatorColor='#f7b736'
                activeTextColor="#000000"
                inactiveTextColor='#6b6e6e'
            />
            {selectedTab === 0 ? 
              <View>
                  {comms.map(key=> {
                return <View style={{flexDirection: "column"}}>
                    {/* <TouchableOpacity onPress={()=>handleNavCommunity(key.ComName)}> */}
                  <Text style={ [styles.comName, {color: colors.text}] }>{key.ComName}</Text>
                  <Text style={ [styles.comDesc, {color: colors.text}] }>{key.description}</Text>
                  {/* </TouchableOpacity> */}
                  <View style={{ position: 'absolute', right: 20, bottom: 30 }}>
                        {canJoin(key.owner, key.ComName,key.members)}
                    </View>
                  </View>
              })}
              </View>
            : 
            <View>
                {myComms.map(key=> {
                return <>
                <View style={{ flexDirection: "row" }}>
                    <TouchableOpacity onPress={()=>handleNavCommunity(key.ComName)}>
                    <Text style={[styles.comName, { color: colors.text }]}>{key.ComName}</Text>
                    </TouchableOpacity>
                    <View style={{ position: 'absolute', right: 20, bottom: 30 }}>
                        {canJoin(key.owner, key.ComName,key.members)}
                    </View>
                </View>
                <View style={{
                            borderBottomColor: '#c4baba',
                            borderBottomWidth: 1,
                        }} />
                        </>
              })}
                <View style={{flexDirection: "row"}}>
                <Button style={ styles.nextButton } onPress={()=>handleCreateCommunity()}>
                    <Text style={ styles.nextText } >Create a Community</Text>
                </Button>
            </View>
            </View>}
        </SafeAreaView>
        </ScrollView>
    );
}

const styles = StyleSheet.create({
    screen:{
        marginTop: "10%",
        paddingLeft: "2%",
        paddingRight: "2%",
        paddingBottom: "30%",
        marginLeft: "10%",
        marginRight: "10%"
    },
    title: {
        fontSize: 25,
        fontWeight: "bold",
        marginTop: "10%",
        paddingBottom: "5%",
        textAlign:"center"
    },
    comName: {
        fontSize: 20,
        textAlign:"left",
        fontWeight: "bold",
        color: '#5c5a55',
        marginTop: '10%',
        marginBottom: '0%'
    },
    comDesc: {
        fontSize: 16,
        textAlign:"left",
        color: '#5c5a55',
        marginTop: '5%',
        marginBottom: '5%'
    },
    nextButton: {
        width: '100%',
        justifyContent: 'center',
        backgroundColor: "#d4911c",
        borderRadius: 10,
        alignItems: "center",
        marginBottom: 10,
        marginTop: 50
    },
    nextText: {
        fontSize: 16,
        fontWeight: "bold",
        color: "white"
    },
});

export default Communities;