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 { PanelCSS, BehaviorFormStyled } from './behavior.style';
export const BehaviorPanel = ({ id, path, schema, }) => {
    var _a;
    const { t } = useTranslation();
    const { dispatch } = useCommander();
    const behaviorPath = useMemo(() => path.concat(`id:${id}`), [path]);
    const namePath = useMemo(() => behaviorPath.concat('name'), [behaviorPath]);
    const optionsPath = useMemo(() => behaviorPath.concat('options'), [behaviorPath]);
    const name = useConfig(namePath);
    const handleDelete = useCallback(() => {
        dispatch(deleteValue(behaviorPath));
    }, [dispatch, behaviorPath]);
    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, children: !schema ? (_jsx(BehaviorFormStyled, { children: t('components.behaviors.behavior.noSchema.title') })) : (((_a = schema.fields) === null || _a === void 0 ? void 0 : _a.length) || schema.view) ? (_jsx(BehaviorWidget, { name: name, path: optionsPath })) : null }));
};
