/*!
 * 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, CollapsiblePanelContainer, DialogConfirm } from '@essex/themed-components';
import { useTheme } from '@fluentui/react';
import debug from 'debug';
import { memo, useEffect, useRef } from 'react';
import { useWorkflowSteps } from '../hooks/useWorkflowSteps.js';
import { useDeleteConfirm } from './StepHistoryList.hooks.js';
import { Columns, Container, ListWrapper, PanelHeader, StepIndex, tableTransformStyle, Verb } from './StepHistoryList.styles.js';
import { getCollapsiblePanelStyles } from './StepHistoryList.utils.js';
import { TableTransform } from './TableTransform.js';
const log = debug('datashaper');
export const StepHistoryList = /*#__PURE__*/ memo(function StepsList({ onDelete , onDuplicateClicked , onSelect , workflow , onSave , order ,  }) {
    const ref = useRef(null);
    const theme = useTheme();
    const steps = useWorkflowSteps(workflow, order);
    const collapsiblePanelStyles = getCollapsiblePanelStyles(theme);
    const { onClick: onDeleteClicked , onConfirm: onConfirmDelete , toggle: toggleDeleteModal , isOpen: isDeleteModalOpen ,  } = useDeleteConfirm(onDelete);
    useEffect(()=>{
        const f = ()=>{
            ref?.current?.scrollIntoView(false);
        };
        f();
    }, [
        steps
    ]);
    return /*#__PURE__*/ _jsx(Container, {
        children: /*#__PURE__*/ _jsxs(CollapsiblePanelContainer, {
            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
                }),
                steps.map((step)=>{
                    const stepIndex = workflow.steps.findIndex((s)=>s.id === step.id);
                    return /*#__PURE__*/ _jsx(CollapsiblePanel, {
                        styles: collapsiblePanelStyles,
                        onRenderHeader: ()=>onRenderHeader(step, stepIndex),
                        children: /*#__PURE__*/ _jsx(ListWrapper, {
                            children: /*#__PURE__*/ _jsx(TableTransform, {
                                hideInput: true,
                                hideOutput: true,
                                step: step,
                                index: stepIndex,
                                workflow: workflow,
                                style: tableTransformStyle,
                                onDelete: onDeleteClicked,
                                onPreview: onSelect,
                                onDuplicate: onDuplicateClicked,
                                onTransformRequested: (s, o)=>onSave?.(s, o, stepIndex),
                                hideStepSelector: true
                            }, stepIndex)
                        })
                    }, stepIndex);
                })
            ]
        })
    });
});
function onRenderHeader(step, index) {
    const { args  } = step;
    const columnList = args.columns || args.on || [
        args.column
    ];
    let columns = '';
    try {
        if (Array.isArray(columnList)) {
            columns = columnList.join(', ');
        } else if (typeof columnList === 'object') {
            columns = Object.values(columnList)?.join(', ');
        }
    } catch (e) {
        log('ColumnList type is not being currently supported', typeof columnList, e);
    }
    return /*#__PURE__*/ _jsxs(PanelHeader, {
        children: [
            /*#__PURE__*/ _jsxs(Verb, {
                children: [
                    /*#__PURE__*/ _jsxs(StepIndex, {
                        children: [
                            "#",
                            index + 1
                        ]
                    }),
                    " ",
                    step.verb
                ]
            }),
            /*#__PURE__*/ _jsx(Columns, {
                children: columns
            })
        ]
    });
}
