import { jsx as _jsx } from "@emotion/react/jsx-runtime";
import { useMemo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { Panel } from '../../../components/panel';
import { BehaviorWidget } from '../../../components/behavior-widget';
import { useConfig, useCommander } from '../../../../../hooks';
import { deleteValue } from '../../../../../commands';
import { formatWidgetName } from '../../../../../../utils/format-widget-name';
import { NAMESPACE_EXTENSION } from '../../../../../providers/schemas-provider/consts';
import { BEHAVIOR_TYPE } from './consts';
import { PanelCSS, EffectFormStyled } from './renderer.style';
export const EffectPanel = ({ id, path, schema, extra, }) => {
    var _a;
    const { t } = useTranslation();
    const { dispatch } = useCommander();
    const effectPath = useMemo(() => path.concat(`id:${id}`), [path]);
    const namePath = useMemo(() => effectPath.concat('name'), [effectPath]);
    const optionsPath = useMemo(() => effectPath.concat('options'), [effectPath]);
    const name = useConfig(namePath);
    const handleDelete = useCallback(() => {
        dispatch(deleteValue(effectPath));
    }, [dispatch, effectPath]);
    return (_jsx(Panel, { css: PanelCSS(!schema), size: "small", title: (schema === null || schema === void 0 ? void 0 : schema.title)
            ? t(schema.title, { ns: NAMESPACE_EXTENSION })
            : formatWidgetName(name), onDelete: handleDelete, extra: extra, children: !schema ? (_jsx(EffectFormStyled, { children: t('systems.renderer.filterEffect.noSchema.title') })) : ((_a = schema.fields) === null || _a === void 0 ? void 0 : _a.length) || schema.view ? (_jsx(BehaviorWidget, { name: name, path: optionsPath, systemName: BEHAVIOR_TYPE })) : null }));
};
