import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { useEffect, 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 { getUniqueName } from '../../../../../../utils/get-unique-name';
import { CollapsePanel } from '../../../components/collapse-panel';
import { GroupsStyled, ButtonCSS, } from './audio-groups.style';
import { AudioGroup as AudioGroupPanel } from './audio-group';
import { PATH } from './consts';
export const AudioGroupsWidget = () => {
    const { t } = useTranslation();
    const { dispatch } = useCommander();
    const groups = useConfig(PATH);
    useEffect(() => {
        if (groups) {
            return;
        }
        dispatch(addValue(['globalOptions'], {
            name: 'audioGroups',
            options: {
                groups: [],
            },
        }));
    }, [groups]);
    const handleAddNewGroup = useCallback(() => {
        if (!groups) {
            return;
        }
        dispatch(addValue(PATH, {
            id: uuidv4(),
            name: getUniqueName('bus', groups),
            volume: 1,
        }));
    }, [dispatch, groups]);
    return (_jsxs(CollapsePanel, { title: t('globalOptions.audioGroups.title'), deletable: false, children: [_jsx(GroupsStyled, { children: groups === null || groups === void 0 ? void 0 : groups.map(({ id }) => (_jsx(AudioGroupPanel, { id: id }, id))) }), _jsx(Button, { css: ButtonCSS, size: "small", onClick: handleAddNewGroup, children: t('globalOptions.audioGroups.addNew.title') })] }));
};
