"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DefaultInspector = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const remotion_1 = require("remotion");
const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
const VisualControls_1 = require("../../visual-controls/VisualControls");
const CurrentAsset_1 = require("../CurrentAsset");
const CurrentComposition_1 = require("../CurrentComposition");
const DefaultPropsEditor_1 = require("../DefaultPropsEditor");
const get_zod_if_possible_1 = require("../get-zod-if-possible");
const is_menu_item_1 = require("../Menu/is-menu-item");
const ObserveDefaultPropsContext_1 = require("../ObserveDefaultPropsContext");
const DataEditor_1 = require("../RenderModal/DataEditor");
const zod_schema_type_1 = require("../RenderModal/SchemaEditor/zod-schema-type");
const WarningIndicatorButton_1 = require("../RenderModal/WarningIndicatorButton");
const SegmentedControl_1 = require("../SegmentedControl");
const VisualControlsContent_1 = require("../VisualControls/VisualControlsContent");
const common_1 = require("./common");
const CompositionDimensions_1 = require("./CompositionDimensions");
const styles_1 = require("./styles");
const DefaultInspector = ({ composition, currentDefaultProps, readOnlyStudio, setDefaultProps }) => {
    var _a, _b;
    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
    const hasSelectedAsset = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'asset';
    const z = (0, get_zod_if_possible_1.useZodIfPossible)();
    const canSaveDefaultProps = (0, react_1.useContext)(ObserveDefaultPropsContext_1.ObserveDefaultPropsContext);
    const { handles: visualControlHandles } = (0, react_1.useContext)(VisualControls_1.VisualControlsContext);
    const [defaultPropsMode, setDefaultPropsMode] = (0, react_1.useState)('schema');
    const compositionId = (_a = composition === null || composition === void 0 ? void 0 : composition.id) !== null && _a !== void 0 ? _a : null;
    const hasVisualControls = interactivity_enabled_1.studioInteractivityEnabled && Object.keys(visualControlHandles).length > 0;
    (0, react_1.useEffect)(() => {
        setDefaultPropsMode('schema');
    }, [compositionId]);
    const defaultPropsModeItems = (0, react_1.useMemo)(() => {
        return [
            {
                key: 'schema',
                label: 'Schema',
                onClick: () => {
                    setDefaultPropsMode('schema');
                },
                selected: defaultPropsMode === 'schema',
            },
            {
                key: 'json',
                label: 'JSON',
                onClick: () => {
                    setDefaultPropsMode('json');
                },
                selected: defaultPropsMode === 'json',
            },
        ];
    }, [defaultPropsMode]);
    const canShowDefaultPropsSection = (0, react_1.useMemo)(() => {
        if (!z || !(composition === null || composition === void 0 ? void 0 : composition.schema) || !composition.defaultProps) {
            return false;
        }
        if (!(typeof composition.schema.safeParse ===
            'function')) {
            return false;
        }
        return (0, zod_schema_type_1.getZodSchemaType)(composition.schema) !== 'any';
    }, [composition === null || composition === void 0 ? void 0 : composition.defaultProps, composition === null || composition === void 0 ? void 0 : composition.schema, z]);
    const { setShowWarning, showWarning } = (0, DataEditor_1.useDataEditorWarningVisibility)();
    const { warnings: defaultPropsWarnings } = (0, DataEditor_1.useDataEditorWarnings)({
        canSaveDefaultProps: (_b = canSaveDefaultProps === null || canSaveDefaultProps === void 0 ? void 0 : canSaveDefaultProps.canSaveDefaultProps) !== null && _b !== void 0 ? _b : null,
        defaultProps: currentDefaultProps,
        mode: defaultPropsMode,
        propsEditType: 'default-props',
        showCannotSaveDefaultPropsWarning: canShowDefaultPropsSection,
    });
    if (hasSelectedAsset) {
        return (jsx_runtime_1.jsx("div", { style: styles_1.scrollableContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx("div", { style: styles_1.compositionSection, children: jsx_runtime_1.jsx(CurrentAsset_1.CurrentAsset, { readOnlyStudio: readOnlyStudio }) }) }));
    }
    if (composition === null) {
        return jsx_runtime_1.jsx("div", { style: styles_1.container });
    }
    return (jsx_runtime_1.jsxs("div", { style: styles_1.scrollableContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [
            jsx_runtime_1.jsxs("div", { style: styles_1.compositionSection, children: [
                    jsx_runtime_1.jsx(CurrentComposition_1.CurrentComposition, {}), jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx(CompositionDimensions_1.CompositionDimensions, { compositionId: composition.id, disabled: readOnlyStudio, stack: composition.stack })
                ] }), canShowDefaultPropsSection ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                    jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsxs("div", { style: styles_1.defaultPropsSection, children: [
                            jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderRow, children: [
                                        jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderStart, children: [
                                                jsx_runtime_1.jsx("span", { style: styles_1.sectionHeaderTitle, children: "Default Props" }), jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: defaultPropsModeItems, needsWrapping: false, size: "compact" })
                                            ] }), jsx_runtime_1.jsx("div", { style: styles_1.sectionHeaderEnd, children: defaultPropsWarnings.length > 0 ? (jsx_runtime_1.jsx(WarningIndicatorButton_1.WarningIndicatorButton, { setShowWarning: setShowWarning, showWarning: showWarning, warningCount: defaultPropsWarnings.length, size: "compact" })) : null })
                                    ] }) }), defaultPropsWarnings.length > 0 && showWarning ? (jsx_runtime_1.jsx("div", { style: styles_1.defaultPropsWarningContainer, children: jsx_runtime_1.jsx(common_1.InspectorDefaultPropsWarnings, { warnings: defaultPropsWarnings }) })) : null, jsx_runtime_1.jsx(DefaultPropsEditor_1.DefaultPropsEditor, { unresolvedComposition: composition, defaultProps: currentDefaultProps, setDefaultProps: setDefaultProps, propsEditType: "default-props", schemaErrorMode: "compact", layout: "inspector", mode: defaultPropsMode, onModeChange: setDefaultPropsMode, hideModeControls: canShowDefaultPropsSection, warnings: defaultPropsWarnings, showWarning: false, setShowWarning: setShowWarning, hideWarningButton: true }, composition.id)
                        ] })
                ] })) : null, hasVisualControls ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                    jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsxs("div", { style: styles_1.visualControlsSection, children: [
                            jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: "Visual Controls" }), jsx_runtime_1.jsx(VisualControlsContent_1.VisualControlsContent, {})
                        ] })
                ] })) : null] }));
};
exports.DefaultInspector = DefaultInspector;
