import {
    View,
    StyleSheet,
    FlatList,
} from "react-native";
import {useTheme, Card, Text, Button, ActivityIndicator} from "react-native-paper";
import {Link} from "expo-router";
import useLocationStore from "@/locationStore";

export default function Index() {
    const theme = useTheme();
    const {locations, loading} = useLocationStore();

    if (loading) {
        return (
            <View style={[styles.container, {backgroundColor: theme.colors.background}]}>
                <ActivityIndicator size="large" color={theme.colors.primary}/>
            </View>
        );
    }

    return (
        <View
            style={[styles.container, {backgroundColor: theme.colors.background}]}
        >
            <FlatList
                data={locations}
                keyExtractor={(item) => item.id.toString()}
                renderItem={({item}) => (
                    <Card style={{margin: 10}}>
                        <Card.Cover
                            style={{marginBottom: 10}}
                            source={item.imageSource}
                        />
                        <Card.Content style={{marginBottom: 10}}>
                            <Text variant="titleLarge">{item.name}</Text>
                            <Text variant="bodyMedium">
                                {item.description && item.description.split(".")[0]}...
                            </Text>
                        </Card.Content>
                        <Card.Actions>
                            <Link href={`/location/${item.id}`} asChild>
                                <Button>Zobacz więcej</Button>
                            </Link>
                        </Card.Actions>
                    </Card>
                )}
            />
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#25292e",
        justifyContent: "center",
        alignItems: "center",
    },
});