import {
    EventSubscription,
    useAddUserInputListenerCallback,
    UserInputEvent,
    UserInputEventName,
    UserInputManager
} from '@amzn/react-native-kepler';
import * as React from 'react';
import { useEffect, useState } from 'react';
import { Text, View } from 'react-native';

const supportedEvents = [
    UserInputEventName.Up,
    UserInputEventName.Down,
    UserInputEventName.Left,
    UserInputEventName.Right,
    UserInputEventName.Select,
    UserInputEventName.Back,
    UserInputEventName.Menu,
    UserInputEventName.PlayPause,
    UserInputEventName.SkipBackward,
    UserInputEventName.SkipForward,
    UserInputEventName.PageUp,
    UserInputEventName.PageDown,
    UserInputEventName.PageLeft,
    UserInputEventName.PageRight,
    UserInputEventName.Info,
    UserInputEventName.More
];

type KeyUsageMap = {
    [key in UserInputEventName]?: { pressed: boolean, count: number }
};

const App = () => {
    const addUserInputListenerCallback = useAddUserInputListenerCallback();
    const eventSubscriptions: EventSubscription[] = [];

    const [state, setKeyState] = useState<KeyUsageMap>(
        supportedEvents.reduce(
            (obj, event: UserInputEventName) => ({
                ...obj,
                [event]: { pressed: false, count: 0 }
            }),
            {}
        )
    );

    useEffect(() => {
        supportedEvents.forEach((name, index) => {
            eventSubscriptions.push(addUserInputListenerCallback(name, (event: UserInputEvent) => {
                console.log(name, event);
                update(name, event);
                return true;
            }));
        });
        return () => {
            eventSubscriptions.forEach((subscription) => subscription.remove());
        };
    }, []);

    const update = (name: UserInputEventName, event: UserInputEvent) => {
        setKeyState((oldState: KeyUsageMap) => {
            const newState = { ...oldState };
            const oldCount = oldState[name]?.count ?? 0;
            if (event.phase === 'PRESSED') {
                newState[name] = { count: oldCount + 1, pressed: true };
            } else if (event.phase === 'RELEASED') {
                newState[name] = { count: oldCount, pressed: false };
            }
            return newState;
        });
    };

    return (
        <View style={DEFAULT_STYLES.CONTAINER}>
            <View style={styles.innerContainer}>
                <Text style={styles.noteText}>
                    Press a key on the remote. To navigate back, press the
                    "Back" button twice.
                </Text>

                <View style={styles.itemContainer}>
                    {Object.entries(state).map(([name, info]: any) => (
                        <View
                            style={[
                                styles.item,
                                info.pressed ? styles.itemPressed : {}
                            ]}>
                            <Text style={styles.itemKeyText}>{name}</Text>
                            <Text style={styles.itemSubText}>
                                Press Count: {info.count}
                            </Text>
                        </View>
                    ))}
                </View>
            </View>
        </View>
    );
};

export default App;