import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { useMemo, useCallback, } from 'react';
import { useTranslation } from 'react-i18next';
import { LabelledCheckbox } from '../../../components/checkbox';
import { LabelledTextInput } from '../../../components/text-input';
import { LabelledSelect } from '../../../components/select';
import { MultiField } from '../../../components/multi-field';
import { DependencyField } from '../../../components/dependency-field';
import { Field } from '../../../components/field';
import { Panel } from '../../../components/panel';
import { useCommander, useExtension } from '../../../../../hooks';
import { deleteValue, setValue } from '../../../../../commands';
import { KeyPicker } from './key-picker';
import { SectionHeaderStyled, PanelCSS, } from './keyboard-control.style';
const KEEP_EMIT_DEPENDENCY_VALUE = true;
export const InputBind = ({ path, id, inputKey, order, }) => {
    const { t } = useTranslation();
    const { dispatch } = useCommander();
    const { events } = useExtension();
    const bindPath = useMemo(() => path.concat('inputEventBindings', `id:${id}`), [path]);
    const keyPath = useMemo(() => bindPath.concat('key'), [bindPath]);
    const pressedPath = useMemo(() => bindPath.concat('pressed'), [bindPath]);
    const keepEmitPath = useMemo(() => bindPath.concat('keepEmit'), [bindPath]);
    const eventTypePath = useMemo(() => bindPath.concat('eventType'), [bindPath]);
    const attrsPath = useMemo(() => bindPath.concat('attrs'), [bindPath]);
    const handleKeyChange = useCallback((value) => {
        dispatch(setValue(keyPath, value));
    }, [keyPath, keyPath]);
    const handleDeleteBind = useCallback(() => {
        dispatch(deleteValue(bindPath));
    }, [dispatch, bindPath]);
    return (_jsxs(Panel, { css: PanelCSS, size: "small", title: t('components.keyboardControl.bind.title', { index: order + 1 }), onDelete: handleDeleteBind, children: [_jsx(KeyPicker, { value: inputKey, onChange: handleKeyChange }), _jsx(Field, { path: pressedPath, component: LabelledCheckbox, label: t('components.keyboardControl.bind.pressed.title') }), _jsx(DependencyField, { path: keepEmitPath, component: LabelledCheckbox, label: t('components.keyboardControl.bind.keepEmit.title'), dependencyPath: pressedPath, dependencyValue: KEEP_EMIT_DEPENDENCY_VALUE }), _jsx(Field, { path: eventTypePath, component: events ? LabelledSelect : LabelledTextInput, label: t('components.keyboardControl.bind.eventType.title'), options: events }), _jsx(SectionHeaderStyled, { children: t('components.keyboardControl.bind.attributes.title') }), _jsx(MultiField, { path: attrsPath })] }));
};
