nitro-react/src/components/mod-tools/ModToolsView.tsx

import { RoomEngineObjectEvent, RoomObjectCategory, RoomObjectType } from '@nitrots/nitro-renderer';
import { FC, useCallback, useReducer, useRef, useState } from 'react';
import { GetRoomSession } from '../../api';
import { Base, Button, DraggableWindowPosition, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common';
import { ModToolsEvent, ModToolsOpenRoomChatlogEvent, ModToolsOpenRoomInfoEvent, ModToolsOpenUserInfoEvent } from '../../events';
import { DispatchUiEvent, UseRoomEngineEvent, UseUiEvent } from '../../hooks';
import { ISelectedUser } from './common/ISelectedUser';
import { ModToolsContextProvider } from './ModToolsContext';
import { ModToolsMessageHandler } from './ModToolsMessageHandler';
import { initialModTools, ModToolsActions, ModToolsReducer } from './reducers/ModToolsReducer';
import { ModToolsChatlogView } from './views/room/ModToolsChatlogView';
import { ModToolsRoomView } from './views/room/ModToolsRoomView';
import { ModToolsTicketsView } from './views/tickets/ModToolsTicketsView';
import { ModToolsUserChatlogView } from './views/user/ModToolsUserChatlogView';
import { ModToolsUserView } from './views/user/ModToolsUserView';

export const ModToolsView: FC<{}> = props =>
{
    const [ isVisible, setIsVisible ] = useState(false);
    const [ selectedUser, setSelectedUser ] = useState<ISelectedUser>(null);
    const [ isTicketsVisible, setIsTicketsVisible ] = useState(false);
    const [ modToolsState, dispatchModToolsState ] = useReducer(ModToolsReducer, initialModTools);
    const { currentRoomId = null, openRooms = null, openRoomChatlogs = null, openUserChatlogs = null, openUserInfo = null } = modToolsState;
    const elementRef = useRef<HTMLDivElement>(null);

    const onModToolsEvent = useCallback((event: ModToolsEvent) =>
    {
        switch(event.type)
        {
            case ModToolsEvent.SHOW_MOD_TOOLS:
                setIsVisible(true);
                return;
            case ModToolsEvent.HIDE_MOD_TOOLS:
                setIsVisible(false);
                return;   
            case ModToolsEvent.TOGGLE_MOD_TOOLS:
                setIsVisible(value => !value);
                return;
        }
    }, []);

    UseUiEvent(ModToolsEvent.SHOW_MOD_TOOLS, onModToolsEvent);
    UseUiEvent(ModToolsEvent.HIDE_MOD_TOOLS, onModToolsEvent);
    UseUiEvent(ModToolsEvent.TOGGLE_MOD_TOOLS, onModToolsEvent);
    
    const onRoomEngineObjectEvent = useCallback((event: RoomEngineObjectEvent) =>
    {
        if(event.category !== RoomObjectCategory.UNIT) return;

        const roomSession = GetRoomSession();

        if(!roomSession) return;

        const userData = roomSession.userDataManager.getUserDataByIndex(event.objectId);

        if(!userData || userData.type !== RoomObjectType.USER) return;

        setSelectedUser({ userId: userData.webID, username: userData.name });
    }, []);
    
    UseRoomEngineEvent(RoomEngineObjectEvent.SELECTED, onRoomEngineObjectEvent);

    const handleClick = useCallback((action: string, value?: string) =>
    {
        if(!action) return;

        switch(action)
        {
            case 'toggle_room': {
                if(!openRooms)
                {
                    DispatchUiEvent(new ModToolsOpenRoomInfoEvent(currentRoomId));
                    return;
                }

                if(openRooms.indexOf(currentRoomId) > -1)
                {
                    handleClick('close_room', currentRoomId.toString());
                }
                else
                {
                    DispatchUiEvent(new ModToolsOpenRoomInfoEvent(currentRoomId));
                }
                return;
            }
            case 'close_room': {
                const itemIndex = openRooms.indexOf(Number(value));

                const clone = Array.from(openRooms);
                clone.splice(itemIndex, 1);

                dispatchModToolsState({
                    type: ModToolsActions.SET_OPEN_ROOMS,
                    payload: {
                        openRooms: clone
                    }
                });                
                return;
            }
            case 'toggle_room_chatlog': {
                if(!openRoomChatlogs)
                {
                    DispatchUiEvent(new ModToolsOpenRoomChatlogEvent(currentRoomId));
                    return;
                }

                if(openRoomChatlogs.indexOf(currentRoomId) > -1)
                {
                    handleClick('close_room_chatlog', currentRoomId.toString());
                }
                else
                {
                    DispatchUiEvent(new ModToolsOpenRoomChatlogEvent(currentRoomId));
                }
                return;
            }
            case 'close_room_chatlog': {
                const itemIndex = openRoomChatlogs.indexOf(Number(value));

                const clone = Array.from(openRoomChatlogs);
                clone.splice(itemIndex, 1);

                dispatchModToolsState({
                    type: ModToolsActions.SET_OPEN_ROOM_CHATLOGS,
                    payload: {
                        openRoomChatlogs: clone
                    }
                });                
                return;
            }
            case 'toggle_user_info': {

                if(!selectedUser) return;

                const userId = selectedUser.userId;

                if(!openUserInfo)
                {
                    DispatchUiEvent(new ModToolsOpenUserInfoEvent(userId));
                    return;
                }

                if(openUserInfo.indexOf(userId) > -1)
                {
                    handleClick('close_user_info', userId.toString());
                }
                else
                {
                    DispatchUiEvent(new ModToolsOpenUserInfoEvent(userId));
                }
                return;
            }
            case 'close_user_info': {
                const itemIndex = openUserInfo.indexOf(Number(value));

                const clone = Array.from(openUserInfo);
                clone.splice(itemIndex, 1);

                dispatchModToolsState({
                    type: ModToolsActions.SET_OPEN_USERINFO,
                    payload: {
                        openUserInfo: clone
                    }
                });                
                return;
            }
            case 'close_user_chatlog': {
                const itemIndex = openUserChatlogs.indexOf(Number(value));

                const clone = Array.from(openUserChatlogs);
                clone.splice(itemIndex, 1);

                dispatchModToolsState({
                    type: ModToolsActions.SET_OPEN_USER_CHATLOGS,
                    payload: {
                        openUserChatlogs: clone
                    }
                });                
                return;
            }
        }
    }, [ openRooms, currentRoomId, openRoomChatlogs, selectedUser, openUserInfo, openUserChatlogs ]);

    return (
        <ModToolsContextProvider value={ { modToolsState, dispatchModToolsState } }>
            <ModToolsMessageHandler />
            { isVisible &&
                <NitroCardView uniqueKey="mod-tools" className="nitro-mod-tools" windowPosition={ DraggableWindowPosition.TOP_LEFT } theme="primary-slim" >
                    <NitroCardHeaderView headerText={ 'Mod Tools' } onCloseClick={ event => setIsVisible(false) } />
                    <NitroCardContentView className="text-black" gap={ 1 }>
                        <Button gap={ 1 } onClick={ event => handleClick('toggle_room') } disabled={ !currentRoomId } className="position-relative">
                            <Base className="icon icon-small-room position-absolute start-1"/> Room Tool
                        </Button>
                        <Button innerRef={ elementRef } gap={ 1 } onClick={ event => handleClick('toggle_room_chatlog') } disabled={ !currentRoomId } className="position-relative">
                            <Base className="icon icon-chat-history position-absolute start-1"/> Chatlog Tool
                        </Button>
                        <Button gap={ 1 } onClick={ () => handleClick('toggle_user_info') } disabled={ !selectedUser } className="position-relative">
                            <Base className="icon icon-user position-absolute start-1"/> User: { selectedUser ? selectedUser.username : '' }
                        </Button>
                        <Button gap={ 1 } onClick={ () => setIsTicketsVisible(value => !value) } className="position-relative">
                            <Base className="icon icon-tickets position-absolute start-1"/> Report Tool
                        </Button>
                    </NitroCardContentView>
                </NitroCardView> }
            { openRooms && openRooms.map(roomId =>
            {
                return <ModToolsRoomView key={ roomId } roomId={ roomId } onCloseClick={ () => handleClick('close_room', roomId.toString()) } />;
            }) 
            }
            { openRoomChatlogs && openRoomChatlogs.map(roomId =>
            {
                return <ModToolsChatlogView key={ roomId } roomId={ roomId } onCloseClick={ () => handleClick('close_room_chatlog', roomId.toString()) } />;
            })
            }
            { openUserInfo && openUserInfo.map(userId =>
            {
                return <ModToolsUserView key={ userId } userId={ userId } onCloseClick={ () => handleClick('close_user_info', userId.toString()) }/>
            })
            }
            { openUserChatlogs && openUserChatlogs.map(userId =>
            {
                return <ModToolsUserChatlogView key={ userId } userId={ userId } onCloseClick={ () => handleClick('close_user_chatlog', userId.toString()) }/>
            })
            }
            
            { isTicketsVisible && <ModToolsTicketsView onCloseClick={ () => setIsTicketsVisible(false) } /> }
        </ModToolsContextProvider>
    );
}