// screens/moves/MoveListScreen.tsx

import React, { useEffect }           from 'react';
import { FlatList, ScrollView, View } from 'react-native';
import { StackNavigationProp }        from '@react-navigation/stack';
import { RootStackParamList }         from "../../navigation/navigationTypes";
import { useDispatch, useSelector }   from 'react-redux';
import { getMoves }                   from '../../redux/actions/moveActions';
import { MoveState }                  from "../../redux/reducers/moveReducer";
import { AppDispatch }                from "../../redux/store";
import MoveListItem                   from "../../components/MoveListItem";

type MoveListScreenNavigationProp = StackNavigationProp<RootStackParamList, 'MoveList'>;

type Props = {
    navigation: MoveListScreenNavigationProp;
};
type RootState = {
    move: MoveState;
};

const MoveListScreen = ({ navigation }: Props) => {
    const dispatch = useDispatch();
    const moves = useSelector((state: RootState) => state.move.moves);

    useEffect(() => {
        const loadMoves = async () => {
            await (dispatch as AppDispatch)(getMoves());
        };
        loadMoves();
    }, [dispatch]);

    return (
        <ScrollView>
            <View>
                <FlatList
                    data={moves}
                    renderItem={({ item }) => (
                        <MoveListItem
                            move={item}
                            onPress={() => navigation.navigate('MoveDetail', { move: item })}
                        />
                    )}
                    keyExtractor={(item) => item.name}
                />
            </View>
        </ScrollView>
    );
};

export default MoveListScreen;