import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Icon } from '@fluentui/react';
import { useBoolean } from '@fluentui/react-hooks';
import { memo, useCallback } from 'react';
import { ManageWorkflow } from './ManageWorkflow.js';
import { Container, InputContainer, OutputContainer, SectionTitle, StepsTrayContainer, WorkflowContainer } from './PrepareDataFull.styles.js';
import { PreviewTable } from './PreviewTable.js';
import { TableListBar } from './TableListBar.js';
export const PrepareDataFull = /*#__PURE__*/ memo(function PrepareDataFull({ inputs , derived , workflow , selectedTableId , outputHeaderCommandBar , stepsPosition ='bottom' , onSelectedTableIdChanged , onUpdateOutput , onUpdateWorkflow ,  }) {
    const [isCollapsed, { toggle: toggleCollapsed  }] = useBoolean(true);
    const selectedTable = derived.find((t)=>t.id === selectedTableId) ?? inputs.find((t)=>t.id === selectedTableId);
    const onUpdateMetadata = useCallback((meta)=>{
        if (selectedTable) {
            selectedTable.metadata = meta;
        }
    }, [
        selectedTable
    ]);
    return /*#__PURE__*/ _jsxs(Container, {
        children: [
            /*#__PURE__*/ _jsxs(InputContainer, {
                children: [
                    /*#__PURE__*/ _jsx(SectionTitle, {
                        children: "Tables"
                    }),
                    /*#__PURE__*/ _jsx(TableListBar, {
                        loading: false,
                        inputs: inputs,
                        derived: derived,
                        selected: selectedTableId,
                        onSelect: onSelectedTableIdChanged
                    })
                ]
            }),
            /*#__PURE__*/ _jsxs(StepsTrayContainer, {
                stepsPosition: stepsPosition,
                isCollapsed: isCollapsed,
                className: "steps",
                children: [
                    /*#__PURE__*/ _jsxs(SectionTitle, {
                        isCollapsed: isCollapsed,
                        onClick: toggleCollapsed,
                        children: [
                            "Steps ",
                            /*#__PURE__*/ _jsx(Icon, {
                                iconName: "ChevronDown"
                            })
                        ]
                    }),
                    /*#__PURE__*/ _jsx(WorkflowContainer, {
                        children: /*#__PURE__*/ _jsx(ManageWorkflow, {
                            inputs: inputs,
                            workflow: workflow,
                            onSelect: onSelectedTableIdChanged,
                            onUpdateOutput: onUpdateOutput,
                            onUpdateWorkflow: onUpdateWorkflow
                        })
                    })
                ]
            }),
            /*#__PURE__*/ _jsxs(OutputContainer, {
                stepsPosition: stepsPosition,
                isCollapsed: isCollapsed,
                children: [
                    /*#__PURE__*/ _jsx(SectionTitle, {
                        children: "Preview"
                    }),
                    /*#__PURE__*/ _jsx(PreviewTable, {
                        onChangeMetadata: onUpdateMetadata,
                        headerCommandBar: outputHeaderCommandBar,
                        table: selectedTable?.table,
                        metadata: selectedTable?.metadata,
                        name: selectedTableId
                    })
                ]
            })
        ]
    });
});
