import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { DialogConfirm } from '@essex/themed-components';
import { memo, useState } from 'react';
import { useGraphManager, useGraphSteps, useStepOutputs } from '../hooks/index.js';
import { useDeleteConfirm, useEditorTarget, useGraphOutputListener, useGraphWorkflowListener, useOnCreateStep, useOnDeleteStep, useOnDuplicateStep, useOnEditStep, useOnSaveStep, useTransformModalState } from './ManageWorkflow.hooks.js';
import { Container, modalStyles } from './ManageWorkflow.styles.js';
import { StepList } from './StepList.js';
import { TableTransformModal } from './TableTransformModal.js';
export const ManageWorkflow = /*#__PURE__*/ memo(function ManageWorkflow({ workflow , inputs , table , onSelect , onUpdateOutput , onUpdateWorkflow , ...props }) {
    const graph = useGraphManager(workflow, inputs);
    // Selected Step/Index State for the component
    const [step, setStep] = useState();
    const [index, setIndex] = useState();
    // Modal view-state
    const { isOpen: isModalOpen , hide: dismissModal , show: showModal ,  } = useTransformModalState(setStep, setIndex);
    // Interaction Handlers
    const onSave = useOnSaveStep(graph);
    const { onClick: onDelete , onConfirm: onConfirmDelete , toggle: toggleDeleteModal , isOpen: isDeleteModalOpen ,  } = useDeleteConfirm(useOnDeleteStep(graph));
    const onEdit = useOnEditStep(setStep, setIndex, showModal);
    const onCreate = useOnCreateStep(index, dismissModal, onSave, onSelect);
    const onDuplicate = useOnDuplicateStep(graph, table, onSave);
    const { addStepButtonId , editorTarget  } = useEditorTarget(index);
    // parallel array of output names for the steps
    const outputs = useStepOutputs(graph);
    const steps = useGraphSteps(graph);
    useGraphOutputListener(graph, onUpdateOutput);
    useGraphWorkflowListener(graph, onUpdateWorkflow);
    return /*#__PURE__*/ _jsxs(Container, {
        children: [
            /*#__PURE__*/ _jsx(StepList, {
                onDeleteClicked: onDelete,
                onSelect: onSelect,
                onEditClicked: onEdit,
                steps: steps,
                outputs: outputs,
                onDuplicateClicked: onDuplicate,
                onStartNewStep: showModal,
                buttonId: addStepButtonId
            }),
            /*#__PURE__*/ _jsxs("div", {
                children: [
                    isModalOpen ? /*#__PURE__*/ _jsx(TableTransformModal, {
                        target: editorTarget,
                        step: step,
                        index: index ?? graph.steps.length,
                        onTransformRequested: onCreate,
                        graph: graph,
                        onDismiss: dismissModal,
                        styles: modalStyles,
                        ...props
                    }) : null,
                    /*#__PURE__*/ _jsx(DialogConfirm, {
                        toggle: toggleDeleteModal,
                        title: "Are you sure you want to delete this step?",
                        subText: 'You will also lose any table transformations made after this step.',
                        show: isDeleteModalOpen,
                        onConfirm: onConfirmDelete
                    })
                ]
            })
        ]
    });
});
