"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ConnectedCompositionsSection = exports.useConnectedCompositions = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const remotion_1 = require("remotion");
const get_connected_compositions_1 = require("../../helpers/get-connected-compositions");
const CompositionOrStillIcon_1 = require("../CompositionOrStillIcon");
const InitialCompositionLoader_1 = require("../InitialCompositionLoader");
const common_1 = require("./common");
const compositionIconStyle = {
    height: 13,
    width: 13,
};
const compositionListStyle = {
    display: 'flex',
    flexDirection: 'column',
    padding: '6px 0',
};
const useConnectedCompositions = ({ track, }) => {
    const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
    return (0, react_1.useMemo)(() => (0, get_connected_compositions_1.getConnectedCompositions)({
        compositions,
        singleChildComponent: track.sequence.singleChildComponent,
    }), [compositions, track.sequence.singleChildComponent]);
};
exports.useConnectedCompositions = useConnectedCompositions;
const ConnectedCompositionsSection = ({ connectedCompositions }) => {
    const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
    return (jsx_runtime_1.jsx("div", { style: compositionListStyle, children: connectedCompositions.map((composition) => (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: false, onClick: () => selectComposition(composition, true), renderIcon: (color) => (jsx_runtime_1.jsx(CompositionOrStillIcon_1.CompositionOrStillIcon, { color: color, composition: composition, style: compositionIconStyle })), children: composition.id }, composition.id))) }));
};
exports.ConnectedCompositionsSection = ConnectedCompositionsSection;
