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 { InputBind } from './input-bind';
import { EventListStyled, ButtonCSS, } from './mouse-control.style';
const options = [
    'mousedown',
    'mouseup',
    'mousemove',
    'click',
    'contextmenu',
    'dblclick',
    'mouseenter',
    'mouseleave',
].map((value) => ({ title: value, value }));
export const MouseControlWidget = ({ path }) => {
    const { t } = useTranslation();
    const { dispatch } = useCommander();
    const bindingsPath = useMemo(() => path.concat('inputEventBindings'), [path]);
    const inputEventBindings = useConfig(bindingsPath);
    const selectedOptions = useMemo(() => inputEventBindings.map((inputEventBinding) => inputEventBinding.event), [inputEventBindings]);
    const handleAddNewBind = useCallback(() => {
        var _a;
        const inputEvent = (_a = options.find((option) => !selectedOptions.includes(option.value))) === null || _a === void 0 ? void 0 : _a.value;
        const inputBind = {
            id: uuidv4(),
            event: inputEvent,
            eventType: '',
            attrs: [],
        };
        if (inputEvent === 'mousedown' || inputEvent === 'mouseup') {
            inputBind.button = 0;
        }
        dispatch(addValue(bindingsPath, inputBind));
    }, [dispatch, bindingsPath, selectedOptions, options]);
    return (_jsxs("div", { children: [_jsx(EventListStyled, { children: inputEventBindings.map((inputEventBind, index) => (_jsx("li", { children: _jsx(InputBind, { path: path, value: inputEventBind.event, order: index, options: options, selectedOptions: selectedOptions }) }, inputEventBind.id))) }), _jsx(Button, { css: ButtonCSS, size: "small", onClick: handleAddNewBind, disabled: selectedOptions.length === options.length, children: t('components.mouseControl.bind.addNew.title') })] }));
};
