import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { useMemo, useCallback, } from 'react';
import { useTranslation } from 'react-i18next';
import { Button } from 'antd';
import { v4 as uuidv4 } from 'uuid';
import { useConfig, useCommander } from '../../../../../hooks';
import { addValue } from '../../../../../commands';
import { EventListStyled, ButtonCSS, } from './keyboard-control.style';
import { InputBind } from './input-bind';
export const KeyboardControlWidget = ({ path }) => {
    const { t } = useTranslation();
    const { dispatch } = useCommander();
    const bindingsPath = useMemo(() => path.concat('inputEventBindings'), [path]);
    const inputEventBindings = useConfig(bindingsPath);
    const addedKeys = useMemo(() => inputEventBindings.map((inputBind) => ({
        id: inputBind.id,
        key: inputBind.key,
    })), [inputEventBindings]);
    const handleAddNewBind = useCallback(() => {
        dispatch(addValue(bindingsPath, {
            id: uuidv4(),
            key: '',
            pressed: true,
            keepEmit: false,
            eventType: '',
            attrs: [],
        }));
    }, [dispatch, bindingsPath]);
    return (_jsxs("div", { children: [_jsx(EventListStyled, { children: addedKeys.map(({ id, key }, index) => (_jsx("li", { children: _jsx(InputBind, { path: path, id: id, inputKey: key, order: index }) }, id))) }), _jsx(Button, { css: ButtonCSS, size: "small", onClick: handleAddNewBind, children: t('components.keyboardControl.bind.addNew.title') })] }));
};
