import {Paragraph} from "react-native-paper";
import React, {useCallback, useMemo} from "react";
import {FlatList, Text, View} from "react-native";
import {Globe, History, ServerOff} from "lucide-react-native";
import {EmptyStatePlaceholder} from "../components/EmptyStatePlaceholder";
import {AMUICard, AMUICardDetail} from "../components/AMUICard";
import TimeAgo from "../components/TimeAgo";

import RealmContext from "../models/RealmContext";
import {AMServer} from "../models/AMServer";

const {useQuery} = RealmContext;

function ServerCard(props: { server: AMServer, navigation: any }) {
    const pageCallback = useCallback(() => {
        props.navigation.navigate('server-card-in', {
            serverId: props.server._id.toHexString()
        });
    }, [props.navigation, props.server]);

    return (
        <AMUICard title={props.server.serverName} onPress={pageCallback}>
            <AMUICardDetail>
                <Globe size={18} color="gray"/>
                <Text style={{color: "gray", fontFamily: "JetBrainsMono_400Regular"}}>
                    {props.server.serverAddress}
                </Text>
            </AMUICardDetail>
            <AMUICardDetail>
                <History size={18} color="gray"/>
                {props.server.lastUsed
                    ? (<TimeAgo style={{color: "gray"}} dateTo={props.server.lastUsed}/>)
                    : (<Paragraph style={{color: "gray"}}>never</Paragraph>)}
            </AMUICardDetail>
        </AMUICard>
    )
}

export default function ServerManager({navigation}) {
    const query = useQuery(AMServer);
    const servers = useMemo(() => query.sorted("lastUsed"), [query]);

    if (!servers.length) {
        return (
            <View style={{display: "flex", flex: 1, gap: 15, justifyContent: "center", alignItems: "center"}}>
                <EmptyStatePlaceholder message="No servers added yet" icon={<ServerOff color="gray"/>}/>
            </View>
        );
    }
    
    
    return (
        <FlatList contentInsetAdjustmentBehavior="always"
                  style={{padding: 16, paddingTop: 24}}
                  data={servers}
                  keyExtractor={i => i._id.toString()}
                  contentContainerStyle={{paddingBottom: 40}}
                  ItemSeparatorComponent={() => <View style={{height: 15}}/>}
                  renderItem={i => <ServerCard navigation={navigation} server={i.item}/>}/>
    )
}