// screens/moves/MoveDetailScreen.tsx

import React                                  from 'react';
import { ScrollView, StyleSheet, Text, View } from 'react-native';
import { RouteProp }                          from '@react-navigation/native';
import { RootStackParamList }                 from "../../navigation/navigationTypes";
import TypeTacticsInfoList                    from "../../components/TypeTacticsInfoList"

type MoveDetailScreenRouteProp = RouteProp<RootStackParamList, 'MoveDetail'>;

type Props = {
    route: MoveDetailScreenRouteProp;
};

const MoveDetailScreen = ({ route }: Props) => {
    const { move } = route.params;

    return (
        <ScrollView style={styles.container}>
            <Text style={styles.title}>Name: {move.name}</Text>
            <Text style={styles.detail}>Category: {move.category}</Text>
            <Text style={styles.detail}>Power: {move.power}</Text>
            <Text style={styles.detail}>Accuracy: {move.accuracy}</Text>
            <Text style={styles.detail}>Type: {move.type.name}</Text>
            <View style={styles.typeListsContainer}>
                <TypeTacticsInfoList isWeakness={true} types={move.type.weakAgainst}/>
                <TypeTacticsInfoList isWeakness={false} types={move.type.effectiveAgainst}/>
            </View>
        </ScrollView>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#FFFFFF',
        padding: 20,
    },
    title: {
        fontSize: 24,
        fontWeight: 'bold',
        marginBottom: 10,
    },
    detail: {
        fontSize: 18,
        marginBottom: 5,
    },
    typeListsContainer: {
        flexDirection: 'row',
        justifyContent: 'space-evenly',
        marginTop: 10,
    },
});

export default MoveDetailScreen;