import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { useMemo, useCallback, } from 'react';
import { useTranslation } from 'react-i18next';
import { LabelledTextInput } from '../../../components/text-input';
import { LabelledRangeInput } from '../../../components/range-input';
import { Field } from '../../../components/field';
import { Panel } from '../../../components/panel';
import { useCommander } from '../../../../../hooks';
import { deleteValue } from '../../../../../commands';
import { PanelCSS, } from './audio-groups.style';
import { PATH } from './consts';
export const AudioGroup = ({ id }) => {
    const { t } = useTranslation();
    const { dispatch } = useCommander();
    const groupPath = useMemo(() => PATH.concat(`id:${id}`), [PATH]);
    const namePath = useMemo(() => groupPath.concat('name'), [groupPath]);
    const volumePath = useMemo(() => groupPath.concat('volume'), [groupPath]);
    const handleDeleteBind = useCallback(() => {
        dispatch(deleteValue(groupPath));
    }, [dispatch, groupPath]);
    return (_jsxs(Panel, { css: PanelCSS, size: "small", title: t('globalOptions.audioGroups.panel.name.title'), onDelete: handleDeleteBind, children: [_jsx(Field, { path: namePath, component: LabelledTextInput, label: t('globalOptions.audioGroups.name.title') }), _jsx(Field, { path: volumePath, component: LabelledRangeInput, label: t('globalOptions.audioGroups.volume.title'), min: 0, max: 1, step: 0.01 })] }));
};
