import React, { useEffect } from 'react';
import { Websocket } from '@/plugins/Websocket';
import { ServerContext } from '@/state/server';
import getWebsocketToken from '@/api/server/getWebsocketToken';

export default () => {
    const server = ServerContext.useStoreState(state => state.server.data);
    const { instance, connected } = ServerContext.useStoreState(state => state.socket);
    const setServerStatus = ServerContext.useStoreActions(actions => actions.status.setServerStatus);
    const { setInstance, setConnectionState } = ServerContext.useStoreActions(actions => actions.socket);

    useEffect(() => {
        // If there is already an instance or there is no server, just exit out of this process
        // since we don't need to make a new connection.
        if (instance || !server) {
            return;
        }

        const socket = new Websocket();

        socket.on('SOCKET_OPEN', () => setConnectionState(true));
        socket.on('SOCKET_CLOSE', () => setConnectionState(false));
        socket.on('SOCKET_ERROR', () => setConnectionState(false));
        socket.on('status', (status) => setServerStatus(status));

        getWebsocketToken(server.uuid)
            .then(data => {
                socket.setToken(data.token).connect(data.socket);
                setInstance(socket);
            })
            .catch(error => console.error(error));

        return () => {
            socket && socket.close();
            instance && instance!.removeAllListeners();
        };
    }, [ server ]);

    // Prevent issues with HMR in development environments. This might need to also
    // exist outside of dev? Will need to see how things go.
    if (process.env.NODE_ENV === 'development') {
        useEffect(() => {
            if (!connected && instance && instance.getToken() && instance.getSocketUrl()) {
                instance.connect(instance.getSocketUrl()!);
            }
        }, [ connected ]);
    }

    return null;
};