import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { useState, useCallback, useContext, useEffect, useMemo, } from 'react';
import { useTranslation } from 'react-i18next';
import isEqual from 'lodash.isequal';
import { Radio } from 'antd';
import { DragOutlined, SearchOutlined, AimOutlined, UserOutlined, } from '@ant-design/icons';
import { EngineContext } from '../../providers';
import { Tool, ToolController } from '../../../engine/components';
import { EventType } from '../../../events';
import { useStore } from '../../hooks/use-store';
import { getSavedSelectedSceneId } from '../../../utils/get-saved-selected-scene-id';
import { features } from './components';
import { ToolbarStyled, ToolGroupCSS } from './toolbar.style';
export const Toolbar = () => {
    const { t } = useTranslation();
    const { world } = useContext(EngineContext);
    const store = useStore();
    const [selectedTool, setSelectedTool] = useState('');
    const [toolFeatures, setToolFeatures] = useState({});
    const [disabled, setDisabled] = useState(() => !getSavedSelectedSceneId(store));
    const ToolFeatures = useMemo(() => features[selectedTool], [selectedTool]);
    useEffect(() => {
        const handleSelectScene = (event) => {
            setDisabled(event.sceneId === undefined);
        };
        const handleToolUpdated = () => {
            const mainActor = world.data.mainActor;
            const toolController = mainActor.getComponent(ToolController);
            const toolActor = mainActor.findChildById(toolController.activeTool);
            if (!toolActor) {
                return;
            }
            const { name, features: currentFeatures, } = toolActor.getComponent(Tool);
            setSelectedTool((prev) => (name !== prev ? name : prev));
            const featuresValues = Object.keys(currentFeatures).reduce((acc, key) => {
                acc[key] = currentFeatures[key].value;
                return acc;
            }, {});
            setToolFeatures((prev) => (!isEqual(featuresValues, prev) ? featuresValues : prev));
        };
        handleToolUpdated();
        world.addEventListener(EventType.SelectScene, handleSelectScene);
        world.addEventListener(EventType.ToolUpdated, handleToolUpdated);
        return () => {
            world.removeEventListener(EventType.SelectScene, handleSelectScene);
            world.removeEventListener(EventType.ToolUpdated, handleToolUpdated);
        };
    }, [world]);
    const handleSelect = useCallback((event) => {
        world.dispatchEvent(EventType.SelectTool, {
            name: event.target.value,
        });
    }, [world]);
    return (_jsxs(ToolbarStyled, { children: [_jsxs(Radio.Group, { css: ToolGroupCSS, buttonStyle: "solid", size: "small", value: selectedTool, onChange: handleSelect, disabled: disabled, children: [_jsx(Radio.Button, { value: "hand", children: _jsx(DragOutlined, { title: t('toolbar.hand.title') }) }), _jsx(Radio.Button, { value: "pointer", children: _jsx(AimOutlined, { title: t('toolbar.pointer.title') }) }), _jsx(Radio.Button, { value: "zoom", children: _jsx(SearchOutlined, { title: t('toolbar.zoom.title') }) }), _jsx(Radio.Button, { value: "template", children: _jsx(UserOutlined, { title: t('toolbar.template.title') }) })] }), features[selectedTool] && !disabled ? (_jsx(ToolFeatures, { features: toolFeatures })) : null] }));
};
