// screens/moves/MoveFormScreen.tsx

import React, { useState }                           from 'react';
import { Button, StyleSheet, Text, TextInput, View } from 'react-native';
import { StackNavigationProp }                       from '@react-navigation/stack';
import { RootStackParamList }                        from "../../navigation/navigationTypes";
import { useDispatch }                               from 'react-redux';
import { createMove, updateMove }                    from '../../redux/actions/moveActions';
import { AppDispatch }                               from "../../redux/store";
import { Move }                                      from "../../entities/Move";
import { RouteProp }                                 from "@react-navigation/native";
import { MOVE_FORM }                                 from "../../navigation/constants";
import { Picker }                                    from "@react-native-community/picker";
import { ItemValue }                                 from "@react-native-community/picker/typings/Picker";
import { MoveCategoryName }                          from "../../entities/MoveCategoryName";
import { TypeName }                                  from "../../entities/TypeName";

type MoveFormScreenNavigationProp = StackNavigationProp<RootStackParamList, typeof MOVE_FORM>;
type MoveFormScreenRouteProp = RouteProp<RootStackParamList, typeof MOVE_FORM>;

type Props = {
    navigation: MoveFormScreenNavigationProp;
    route: MoveFormScreenRouteProp
};

const MoveFormScreen = ({ navigation, route }: Props) => {
    const dispatch = useDispatch();
    const [move, setMove] = useState<Move>(route.params?.move || {
        id: null,
        name: '',
        category: MoveCategoryName.PHYSICAL,
        power: 0,
        accuracy: 0,
        type: {
            name: TypeName.NORMAL,
            weakAgainst: [],
            effectiveAgainst: [],
        },
        schemaVersion: 2
    });

    const handleSave = () => {
        if (route.params?.move) {
            (dispatch as AppDispatch)(updateMove(route.params.move.id!, move));
        }
        else {
            (dispatch as AppDispatch)(createMove(move));
        }
        navigation.goBack();
    };

    return (
        <View style={styles.container}>
            <Text>Name: </Text>
            <TextInput
                value={move.name}
                onChangeText={(text) => setMove({ ...move, name: text })}
                style={styles.input}
            />
            <Text>Category: </Text>
            <Picker
                selectedValue={move.category}
                style={styles.input}
                onValueChange={(itemValue: ItemValue) =>
                    setMove({ ...move, category: itemValue as MoveCategoryName })
                }>
                {Object.values(MoveCategoryName).map((value) =>
                    <Picker.Item key={value} label={value} value={value}/>
                )}
            </Picker>
            <Text>Power: </Text>
            <TextInput
                value={move.power.toString()}
                onChangeText={(text) => setMove({ ...move, power: Number(text) })}
                style={styles.input}
                keyboardType="numeric"
            />
            <Text>Accuracy: </Text>
            <TextInput
                value={move.accuracy.toString()}
                onChangeText={(text) => setMove({ ...move, accuracy: Number(text) })}
                style={styles.input}
                keyboardType="numeric"
            />
            <Text>Type: </Text>
            <Picker
                selectedValue={move.type.name}
                style={styles.input}
                onValueChange={(itemValue: ItemValue) =>
                    setMove({ ...move, type: { ...move.type, name: itemValue as TypeName } })
                }>
                {Object.values(TypeName).map((value) =>
                    <Picker.Item key={value} label={value} value={value}/>
                )}
            </Picker>
            {/*TODO add type.weakAgainst and type.effectiveAgainst columns... Two pickers for that, and the ability to keep adding types in each column.. but user can't put the same type in each column or twice in a column*/}
            <Button title="Save" onPress={handleSave}/>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 16,
    },
    input: {
        backgroundColor: '#CEC',
        borderRadius: 8,
    },
});

export default MoveFormScreen;