"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.KeyframeSettings = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const remotion_1 = require("remotion");
const client_id_1 = require("../../helpers/client-id");
const ComboBox_1 = require("../NewComposition/ComboBox");
const InputDragger_1 = require("../NewComposition/InputDragger");
const call_update_keyframe_settings_1 = require("../Timeline/call-update-keyframe-settings");
const common_1 = require("./common");
const styles_1 = require("./styles");
const comboStyle = {
    minWidth: 120,
};
const keyframeSettingsContainer = {
    ...styles_1.detailsContainer,
    paddingBottom: 0,
};
const extrapolateOptions = [
    'extend',
    'clamp',
    'identity',
    'wrap',
];
const labelForExtrapolate = (value) => value[0].toUpperCase() + value.slice(1);
const getExtrapolateValues = (onSelect, disabled) => {
    return extrapolateOptions.map((value) => ({
        type: 'item',
        id: value,
        keyHint: null,
        label: labelForExtrapolate(value),
        leftItem: null,
        disabled,
        onClick: () => onSelect(value),
        quickSwitcherLabel: null,
        subMenu: null,
        value,
    }));
};
const outputOptions = [
    'linear',
    'perceptual-scale',
];
const labelForOutput = (value) => {
    return value === 'perceptual-scale' ? 'Perceptual scale' : 'Linear';
};
const getOutputValues = (onSelect, disabled) => {
    return outputOptions.map((value) => ({
        type: 'item',
        id: value,
        keyHint: null,
        label: labelForOutput(value),
        leftItem: null,
        disabled,
        onClick: () => onSelect(value),
        quickSwitcherLabel: null,
        subMenu: null,
        value,
    }));
};
const KeyframeSettings = ({ update }) => {
    var _a, _b;
    const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
    const { propStatus } = update;
    const [posterize, setPosterize] = (0, react_1.useState)((_a = propStatus.posterize) !== null && _a !== void 0 ? _a : 0);
    const canEditInterpolationSettings = propStatus.interpolationFunction === 'interpolate';
    const disabled = previewServerState.type !== 'connected';
    (0, react_1.useEffect)(() => {
        var _a;
        setPosterize((_a = propStatus.posterize) !== null && _a !== void 0 ? _a : 0);
    }, [propStatus.posterize]);
    const save = (0, react_1.useCallback)((settings) => {
        if (previewServerState.type !== 'connected') {
            return;
        }
        if (update.type === 'sequence') {
            (0, call_update_keyframe_settings_1.callUpdateSequenceKeyframeSettings)({
                fileName: update.fileName,
                nodePath: update.nodePath,
                fieldKey: update.fieldKey,
                settings,
                schema: update.schema,
                setPropStatuses,
                clientId: previewServerState.clientId,
            }).catch(() => undefined);
            return;
        }
        (0, call_update_keyframe_settings_1.callUpdateEffectKeyframeSettings)({
            fileName: update.fileName,
            nodePath: update.nodePath,
            effectIndex: update.effectIndex,
            fieldKey: update.fieldKey,
            settings,
            schema: update.schema,
            setPropStatuses,
            clientId: previewServerState.clientId,
        }).catch(() => undefined);
    }, [previewServerState, setPropStatuses, update]);
    const saveSettings = (0, react_1.useCallback)((_a) => {
        var _b, _c;
        var { left = propStatus.clamping.left, output = (_b = propStatus.output) !== null && _b !== void 0 ? _b : 'linear', posterize: nextPosterize = (_c = propStatus.posterize) !== null && _c !== void 0 ? _c : 0, right = propStatus.clamping.right, } = _a;
        save({
            type: 'settings',
            clamping: canEditInterpolationSettings ? { left, right } : undefined,
            output: canEditInterpolationSettings ? output : undefined,
            posterize: nextPosterize <= 0 ? undefined : nextPosterize,
        });
    }, [
        canEditInterpolationSettings,
        propStatus.clamping.left,
        propStatus.clamping.right,
        propStatus.output,
        propStatus.posterize,
        save,
    ]);
    const onSelectLeft = (0, react_1.useCallback)((left) => saveSettings({ left }), [saveSettings]);
    const onSelectRight = (0, react_1.useCallback)((right) => saveSettings({ right }), [saveSettings]);
    const onSelectOutput = (0, react_1.useCallback)((output) => saveSettings({ output }), [saveSettings]);
    const leftValues = (0, react_1.useMemo)(() => getExtrapolateValues(onSelectLeft, disabled), [disabled, onSelectLeft]);
    const rightValues = (0, react_1.useMemo)(() => getExtrapolateValues(onSelectRight, disabled), [disabled, onSelectRight]);
    const outputValues = (0, react_1.useMemo)(() => getOutputValues(onSelectOutput, disabled), [disabled, onSelectOutput]);
    const onPosterizeChange = (0, react_1.useCallback)((value) => {
        setPosterize(Math.max(0, Math.round(value)));
    }, []);
    const onPosterizeChangeEnd = (0, react_1.useCallback)((value) => {
        const nextPosterize = Math.max(0, Math.round(value));
        setPosterize(nextPosterize);
        saveSettings({ posterize: nextPosterize });
    }, [saveSettings]);
    const posterizeFormatter = (0, react_1.useCallback)((value) => {
        return String(Math.round(Number(value)));
    }, []);
    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
            jsx_runtime_1.jsx("div", { style: styles_1.inspectorSectionDivider }), jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: "Keyframe settings" }), jsx_runtime_1.jsxs("div", { style: keyframeSettingsContainer, children: [canEditInterpolationSettings ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                            jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Extrapolate left", children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: leftValues, selectedId: propStatus.clamping.left, title: "Extrapolate left", style: comboStyle, small: true }) }), jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Extrapolate right", children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: rightValues, selectedId: propStatus.clamping.right, title: "Extrapolate right", style: comboStyle, small: true }) }), jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Output", children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: outputValues, selectedId: (_b = propStatus.output) !== null && _b !== void 0 ? _b : 'linear', title: "Output", style: comboStyle, small: true }) })
                        ] })) : null, jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Posterize", children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: posterize, status: "ok", onValueChange: onPosterizeChange, onValueChangeEnd: onPosterizeChangeEnd, onTextChange: () => undefined, min: 0, step: 1, formatter: posterizeFormatter, rightAlign: true, small: true, disabled: disabled }) })
                ] })
        ] }));
};
exports.KeyframeSettings = KeyframeSettings;
