// screens/moves/MoveFormScreen.tsx

import React, { useState }                     from 'react';
import { Button, StyleSheet, 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();
    };

    // TODO add labels and remove placeholders
    return (
        <View style={styles.container}>
            <TextInput
                value={move.name}
                onChangeText={(text) => setMove({ ...move, name: text })}
                placeholder="Name"
                style={styles.input}
            />
            <Picker
                selectedValue={move.category}
                onValueChange={(itemValue: ItemValue) =>
                    setMove({ ...move, category: itemValue as MoveCategoryName })
                }>
                {Object.values(MoveCategoryName).map((value) =>
                    <Picker.Item key={value} label={value} value={value}/>
                )}
            </Picker>
            <TextInput
                value={move.power.toString()}
                onChangeText={(text) => setMove({ ...move, power: Number(text) })}
                placeholder="Power"
                style={styles.input}
                keyboardType="numeric"
            />
            <TextInput
                value={move.accuracy.toString()}
                onChangeText={(text) => setMove({ ...move, accuracy: Number(text) })}
                placeholder="Accuracy"
                style={styles.input}
                keyboardType="numeric"
            />
            <Picker
                selectedValue={move.type.name}
                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 weakAgainst and 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>
    );
};

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

export default MoveFormScreen;