import Button, { ButtonStyleType } from "../Button/Button";
import BasicForm from "../Forms/BasicForm";
import FormFieldSchemaType from "../Forms/Types/FormFieldSchemaType";
import ConfirmModal from "../Modal/ConfirmModal";
import Modal, { ModalWidth } from "../Modal/Modal";
import ArgumentsForm from "./ArgumentsForm";
import ComponentPortViewer from "./ComponentPortViewer";
import ComponentReturnValueViewer from "./ComponentReturnValueViewer";
import DocumentationViewer from "./DocumentationViewer";
import IconProp from "../../../Types/Icon/IconProp";
import React, { useState } from "react";
import Icon from "../Icon/Icon";
const SectionCard = (props) => {
    const isInfo = props.tone === "info";
    const containerClass = isInfo
        ? "rounded-lg border border-blue-100 bg-blue-50/40 p-4"
        : "rounded-lg border border-gray-200 bg-white p-4";
    const iconClass = isInfo ? "text-blue-500" : "text-gray-400";
    const titleClass = isInfo
        ? "text-[11px] font-semibold uppercase tracking-wider text-blue-700"
        : "text-[11px] font-semibold uppercase tracking-wider text-gray-500";
    return (React.createElement("div", { className: containerClass },
        React.createElement("div", { className: "flex items-center gap-1.5 mb-3" },
            React.createElement(Icon, { icon: props.icon, className: `h-3.5 w-3.5 ${iconClass}` }),
            React.createElement("span", { className: titleClass }, props.title)),
        props.children));
};
const ComponentSettingsModal = (props) => {
    const [component, setComponent] = useState(props.component);
    const [hasFormValidationErrors, setHasFormValidationErrors] = useState({});
    const [showDeleteConfirmation, setShowDeleteConfirmation] = useState(false);
    const settingsSection = (React.createElement(SectionCard, { icon: IconProp.Settings, title: "Settings" },
        React.createElement(ArgumentsForm, { graphComponents: props.graphComponents, workflowId: props.workflowId, component: component, onFormChange: (c) => {
                setComponent(Object.assign({}, c));
            }, onHasFormValidationErrors: (value) => {
                setHasFormValidationErrors(Object.assign(Object.assign({}, hasFormValidationErrors), value));
            } })));
    const idSection = (React.createElement(SectionCard, { icon: IconProp.Label, title: "ID" },
        React.createElement(BasicForm, { hideSubmitButton: true, initialValues: { id: component === null || component === void 0 ? void 0 : component.id }, onChange: (values) => {
                setComponent(Object.assign(Object.assign({}, component), values));
            }, onFormValidationErrorChanged: (hasError) => {
                setHasFormValidationErrors(Object.assign(Object.assign({}, hasFormValidationErrors), { id: hasError }));
            }, fields: [
                {
                    title: "Identifier",
                    description: `Used to reference this ${component.metadata.componentType.toLowerCase()} from other steps.`,
                    field: { id: true },
                    required: true,
                    fieldType: FormFieldSchemaType.Text,
                },
            ] })));
    const documentationSection = component.metadata
        .documentationLink ? (React.createElement(SectionCard, { icon: IconProp.Book, title: "Documentation", tone: "info" },
        React.createElement(DocumentationViewer, { documentationLink: component.metadata.documentationLink, workflowId: props.workflowId, webhookSecretKey: props.webhookSecretKey }))) : null;
    /*
     * Each connection/output card is only rendered if there's something to
     * show — keeps the sidebar lean for triggers (no inputs) and components
     * that don't return any data.
     */
    const hasInputs = Array.isArray(component.metadata.inPorts) &&
        component.metadata.inPorts.length > 0;
    const hasOutputs = Array.isArray(component.metadata.outPorts) &&
        component.metadata.outPorts.length > 0;
    const hasReturns = Array.isArray(component.metadata.returnValues) &&
        component.metadata.returnValues.length > 0;
    const inputsSection = hasInputs ? (React.createElement(SectionCard, { icon: IconProp.ArrowCircleDown, title: "Inputs" },
        React.createElement(ComponentPortViewer, { name: "", description: "Where this step is reached from.", ports: component.metadata.inPorts }))) : null;
    const outputsSection = hasOutputs ? (React.createElement(SectionCard, { icon: IconProp.ArrowCircleRight, title: "Outputs" },
        React.createElement(ComponentPortViewer, { name: "", description: "What runs after this step.", ports: component.metadata.outPorts }))) : null;
    const returnsSection = hasReturns ? (React.createElement(SectionCard, { icon: IconProp.Database, title: "Returns" },
        React.createElement(ComponentReturnValueViewer, { name: "", description: "Data this step makes available downstream.", returnValues: component.metadata.returnValues }))) : null;
    const hasErrors = Object.values(hasFormValidationErrors).some((v) => {
        return v;
    });
    return (React.createElement(Modal, { title: props.title, description: props.description, onClose: props.onClose, onSubmit: () => {
            return component && props.onSave(component);
        }, submitButtonText: "Save", modalWidth: ModalWidth.Large, disableSubmitButton: hasErrors, leftFooterElement: React.createElement(Button, { title: "Delete", icon: IconProp.Trash, buttonStyle: ButtonStyleType.DANGER_OUTLINE, onClick: () => {
                setShowDeleteConfirmation(true);
            } }) },
        React.createElement(React.Fragment, null,
            showDeleteConfirmation && (React.createElement(ConfirmModal, { title: `Delete ${component.metadata.componentType}`, description: `Are you sure you want to delete this ${component.metadata.componentType.toLowerCase()}? This action is not recoverable.`, onClose: () => {
                    setShowDeleteConfirmation(false);
                }, submitButtonText: "Delete", onSubmit: () => {
                    props.onDelete(component);
                    setShowDeleteConfirmation(false);
                    props.onClose();
                }, submitButtonType: ButtonStyleType.DANGER })),
            React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4" },
                React.createElement("div", { className: "md:col-span-2 space-y-4" }, settingsSection),
                React.createElement("div", { className: "md:col-span-1 space-y-4" },
                    idSection,
                    documentationSection,
                    inputsSection,
                    outputsSection,
                    returnsSection)))));
};
export default ComponentSettingsModal;
//# sourceMappingURL=ComponentSettingsModal.js.map