import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { useConfig } from '../../../../hooks';
import { Field, LabelledSelect, Form } from '../../components';
import { SortingWidget, AudioGroupsWidget, PerformanceWidget, PhysicsWidget, } from '../../widgets/global-options';
export const ProjectSettings = () => {
    const { t } = useTranslation();
    const scenes = useConfig('scenes');
    const sceneOptions = useMemo(() => scenes.map((scene) => ({
        title: scene.name,
        value: scene.id,
    })), [scenes]);
    return (_jsxs(Form, { children: [_jsx(Field, { path: ['startSceneId'], component: LabelledSelect, label: t('inspector.projectSettings.field.startScene.label'), options: sceneOptions, allowEmpty: true }), _jsx("div", { children: t('inspector.projectSettings.globalOptions.title') }), _jsx(PerformanceWidget, {}), _jsx(SortingWidget, {}), _jsx(AudioGroupsWidget, {}), _jsx(PhysicsWidget, {})] }));
};
