/*!
 * Copyright (c) Microsoft. All rights reserved.
 * Licensed under the MIT license. See LICENSE file in the project.
 */ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { CollapsiblePanel, DialogConfirm } from '@essex/components';
import { DefaultButton, useTheme } from '@fluentui/react';
import { memo } from 'react';
import { useWorkflowSteps } from '../hooks/useWorkflowSteps.js';
import { StepHeader } from './StepHeader.js';
import { useDeleteConfirm, useTableHandlers } from './StepHistoryList.hooks.js';
import { ButtonContainer, buttonStyles, Container, icons, StepsContainer, tableTransformStyle } from './StepHistoryList.styles.js';
import { getCollapsiblePanelStyles } from './StepHistoryList.utils.js';
import { TableTransform } from './TableTransform.js';
export const StepHistoryList = /*#__PURE__*/ memo(function StepsList({ workflow , showSelectButtons =true , order , onDelete , onSelect , onSave , styles ,  }) {
    const theme = useTheme();
    const steps = useWorkflowSteps(workflow, order);
    const collapsiblePanelStyles = getCollapsiblePanelStyles(theme);
    const { onClick: onDeleteClicked , onConfirm: onConfirmDelete , toggle: toggleDeleteModal , isOpen: isDeleteModalOpen ,  } = useDeleteConfirm(onDelete);
    const { onSelectOriginalTable , onSelectLatest  } = useTableHandlers(workflow, steps, order, onSelect);
    return /*#__PURE__*/ _jsxs(Container, {
        style: styles?.root,
        children: [
            /*#__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
            }),
            showSelectButtons && /*#__PURE__*/ _jsxs(ButtonContainer, {
                style: styles?.buttonContainer,
                children: [
                    onSelectOriginalTable && /*#__PURE__*/ _jsx(DefaultButton, {
                        disabled: !steps.length,
                        iconProps: icons.preview,
                        style: buttonStyles,
                        onClick: onSelectOriginalTable,
                        children: "Original"
                    }),
                    /*#__PURE__*/ _jsx(DefaultButton, {
                        disabled: !steps.length,
                        iconProps: icons.preview,
                        style: buttonStyles,
                        onClick: onSelectLatest,
                        children: "Latest"
                    })
                ]
            }),
            /*#__PURE__*/ _jsx(StepsContainer, {
                style: styles?.stepsContainer,
                children: steps.map((step)=>{
                    const stepIndex = workflow.steps.findIndex((s)=>s.id === step.id);
                    return /*#__PURE__*/ _jsx(CollapsiblePanel, {
                        styles: collapsiblePanelStyles,
                        onHeaderClick: ()=>onSelect?.(step.id),
                        onRenderHeader: ()=>onRenderHeader(step, stepIndex, styles?.stepHeaders),
                        children: /*#__PURE__*/ _jsx(TableTransform, {
                            hideInput: true,
                            hideOutput: true,
                            step: step,
                            index: stepIndex,
                            workflow: workflow,
                            style: tableTransformStyle,
                            onDelete: onDeleteClicked,
                            onTransformRequested: (s)=>onSave?.(s, stepIndex),
                            hideStepSelector: true
                        })
                    }, step.id);
                })
            })
        ]
    });
});
function onRenderHeader(step, index, styles) {
    return /*#__PURE__*/ _jsx(StepHeader, {
        step: step,
        index: index,
        styles: styles
    });
}
