"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.NewComposition = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const remotion_1 = require("remotion");
const use_create_composition_1 = require("../../helpers/use-create-composition");
const layout_1 = require("../layout");
const ModalFooter_1 = require("../ModalFooter");
const ModalHeader_1 = require("../ModalHeader");
const layout_2 = require("../RenderModal/layout");
const CodemodFooter_1 = require("./CodemodFooter");
const DismissableModal_1 = require("./DismissableModal");
const get_new_composition_defaults_1 = require("./get-new-composition-defaults");
const InputAndValidationContainer_1 = require("./InputAndValidationContainer");
const InputDragger_1 = require("./InputDragger");
const NewCompDuration_1 = require("./NewCompDuration");
const RemInput_1 = require("./RemInput");
const ValidationMessage_1 = require("./ValidationMessage");
const content = {
    padding: 12,
    paddingRight: 12,
    flex: 1,
    fontSize: 13,
    minWidth: 500,
};
const folderPathStyle = {
    fontSize: 14,
};
const NewCompositionLoaded = ({ folderName, parentName, stack }) => {
    const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
    const resolvedComposition = remotion_1.Internals.useResolvedVideoConfig(null);
    const initialComposition = (resolvedComposition === null || resolvedComposition === void 0 ? void 0 : resolvedComposition.type) === 'success' ||
        (resolvedComposition === null || resolvedComposition === void 0 ? void 0 : resolvedComposition.type) === 'success-and-refreshing'
        ? resolvedComposition.result
        : null;
    const initialDimensions = (0, get_new_composition_defaults_1.getNewCompositionDefaults)(initialComposition);
    const [newId, setName] = (0, react_1.useState)(() => (0, use_create_composition_1.getUniqueCompositionName)(compositions));
    const [selectedFrameRate, setFrameRate] = (0, react_1.useState)(initialDimensions.fps);
    const [size, setSize] = (0, react_1.useState)(() => ({
        width: initialDimensions.width,
        height: initialDimensions.height,
    }));
    const [durationInFrames, setDurationInFrames] = (0, react_1.useState)(initialDimensions.durationInFrames);
    const onWidthChanged = (0, react_1.useCallback)((newValue) => {
        setSize((s) => {
            return {
                height: s.height,
                width: Number(newValue),
            };
        });
    }, []);
    const onWidthDirectlyChanged = (0, react_1.useCallback)((newWidth) => {
        setSize((s) => {
            return {
                height: s.height,
                width: newWidth,
            };
        });
    }, []);
    const onHeightDirectlyChanged = (0, react_1.useCallback)((newHeight) => {
        setSize((s) => {
            return {
                width: s.width,
                height: newHeight,
            };
        });
    }, []);
    const onHeightChanged = (0, react_1.useCallback)((newValue) => {
        setSize((s) => {
            return {
                width: s.width,
                height: Number(newValue),
            };
        });
    }, []);
    const onNameChange = (0, react_1.useCallback)((e) => {
        setName(e.target.value);
    }, []);
    const onTextFpsChange = (0, react_1.useCallback)((newFps) => {
        setFrameRate(Number(newFps));
    }, []);
    const onFpsChange = (0, react_1.useCallback)((newFps) => {
        setFrameRate(newFps);
    }, []);
    const { codemod, createComposition, heightValidationMessage: compHeightErrMessage, nameValidationMessage: compNameErrMessage, valid, widthValidationMessage: compWidthErrMessage, } = (0, use_create_composition_1.useCreateComposition)({
        compositions,
        durationInFrames,
        folderName,
        newId,
        parentName,
        selectedFrameRate,
        size,
    });
    const onSubmit = (0, react_1.useCallback)((e) => {
        e.preventDefault();
    }, []);
    const folderPath = [parentName, folderName].filter(Boolean).join('/');
    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "New composition" }), jsx_runtime_1.jsxs("form", { onSubmit: onSubmit, children: [
                    jsx_runtime_1.jsxs("div", { style: content, children: [folderPath ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Folder" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx("span", { style: folderPathStyle, children: folderPath }) })
                                ] })) : null, jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "ID" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs(InputAndValidationContainer_1.InputAndValidationContainer, { children: [
                                                jsx_runtime_1.jsx(RemInput_1.RemotionInput, { value: newId, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Composition ID", status: "ok", rightAlign: true }), compNameErrMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                                                        jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compNameErrMessage, type: "error" })
                                                    ] })) : null] }) })
                                ] }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Width" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs(InputAndValidationContainer_1.InputAndValidationContainer, { children: [
                                                jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: size.width, placeholder: "Width", onTextChange: onWidthChanged, name: "width", step: 2, min: 2, required: true, status: "ok", formatter: (w) => `${w}px`, max: 100000000, onValueChange: onWidthDirectlyChanged, rightAlign: false }), compWidthErrMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                                                        jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compWidthErrMessage, type: "error" })
                                                    ] })) : null] }) })
                                ] }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Height" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs(InputAndValidationContainer_1.InputAndValidationContainer, { children: [
                                                jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: size.height, onTextChange: onHeightChanged, placeholder: "Height", name: "height", step: 2, required: true, formatter: (h) => `${h}px`, min: 2, status: "ok", max: 100000000, onValueChange: onHeightDirectlyChanged, rightAlign: false }), compHeightErrMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                                                        jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compHeightErrMessage, type: "error" })
                                                    ] })) : null] }) })
                                ] }), jsx_runtime_1.jsx(NewCompDuration_1.NewCompDuration, { durationInFrames: durationInFrames, setDurationInFrames: setDurationInFrames }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "FPS" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: selectedFrameRate, onTextChange: onTextFpsChange, placeholder: "Frame rate (fps)", name: "fps", min: 1, required: true, status: "ok", max: 240, step: 0.01, onValueChange: onFpsChange, rightAlign: false }) })
                                ] })
                        ] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: "Creating composition...", errorNotification: "Could not create composition", successNotification: `Created ${newId}`, genericSubmitLabel: "Add to root file", submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, stack: stack, valid: valid, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => createComposition({
                                signal,
                                symbolicatedStack,
                            }), fallbackToRootFile: true }) })
                ] })
        ] }));
};
const NewComposition = ({ folderName, parentName, stack }) => {
    return (jsx_runtime_1.jsx(DismissableModal_1.DismissableModal, { children: jsx_runtime_1.jsx(NewCompositionLoaded, { folderName: folderName, parentName: parentName, stack: stack }) }));
};
exports.NewComposition = NewComposition;
