import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { useMemo, useCallback, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Widget } from '../../../components/widget';
import { Panel } from '../../../components/panel';
import { Labelled } from '../../../components/labelled';
import { BehaviorWidget } from '../../../components/behavior-widget';
import { EntitySelect } from '../../../components/entity-picker';
import { useConfig, useCommander, useBehaviors } from '../../../../../hooks';
import { setValue, deleteValue } from '../../../../../commands';
import { ShaderFormStyled, PanelCSS } from './mesh.style';
const BEHAVIOR_TYPE = 'shader';
export const MeshWidget = ({ path, fields }) => {
    var _a, _b;
    const { t } = useTranslation();
    const { dispatch } = useCommander();
    const shaders = useBehaviors(BEHAVIOR_TYPE);
    const materialPath = useMemo(() => path.concat('material'), [path]);
    const optionsPath = useMemo(() => materialPath.concat('options'), [materialPath]);
    const material = useConfig(materialPath);
    const shaderSchema = (material === null || material === void 0 ? void 0 : material.name) ? shaders === null || shaders === void 0 ? void 0 : shaders[material.name] : undefined;
    const availableShaders = useMemo(() => {
        return Object.keys(shaders !== null && shaders !== void 0 ? shaders : {}).map((key) => ({
            label: key,
            value: key,
        }));
    }, [shaders]);
    const [entityValue, setEntityValue] = useState((_a = material === null || material === void 0 ? void 0 : material.name) !== null && _a !== void 0 ? _a : null);
    const handleAddShader = useCallback((name) => {
        var _a, _b, _c;
        if (name === null) {
            dispatch(deleteValue(materialPath));
            setEntityValue(null);
            return;
        }
        dispatch(setValue(materialPath, {
            name,
            options: (_c = (_b = shaders === null || shaders === void 0 ? void 0 : (_a = shaders[name]).getInitialState) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : {},
        }));
        setEntityValue(name);
    }, [dispatch, materialPath, shaders]);
    const handleCreate = useCallback((name, filepath) => {
        window.electron.createBehavior(name, filepath, BEHAVIOR_TYPE);
    }, []);
    return (_jsxs("div", { children: [(fields === null || fields === void 0 ? void 0 : fields.length) ? _jsx(Widget, { fields: fields, path: path }) : null, _jsxs(Panel, { css: PanelCSS((material === null || material === void 0 ? void 0 : material.name) !== undefined && !shaderSchema), size: "small", title: t('components.mesh.material.panel.title'), children: [_jsx(Labelled, { label: t('components.mesh.material.title'), children: _jsx(EntitySelect, { options: availableShaders, type: BEHAVIOR_TYPE, onAdd: handleAddShader, onCreate: handleCreate, value: entityValue }) }), material ? (_jsx(_Fragment, { children: !shaderSchema ? (_jsx(ShaderFormStyled, { children: t('components.mesh.material.noSchema.title') })) : ((_b = shaderSchema.fields) === null || _b === void 0 ? void 0 : _b.length) || shaderSchema.view ? (_jsx(BehaviorWidget, { name: material.name, path: optionsPath, systemName: BEHAVIOR_TYPE })) : null })) : null] })] }));
};
