/*!
 * Copyright (c) Microsoft. All rights reserved.
 * Licensed under the MIT license. See LICENSE file in the project.
 */ /* eslint-disable @typescript-eslint/unbound-method */ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { readStep } from '@datashaper/workflow';
import { CommandBar } from '@fluentui/react';
import { memo, useCallback, useMemo, useState } from 'react';
import styled from 'styled-components';
import { TableTransformModal } from '../components/TableTransformModal.js';
import { useTransformModalState } from '../hooks/manageWorkflow.js';
import { useColumnCommands, useTableCommands, useUndoCommands } from './TableCommands.hooks.js';
export const TableCommands = /*#__PURE__*/ memo(function TableCommands({ inputTable , workflow , onAddStep , onRemoveStep , selectedColumn , color , background ,  }) {
    const [step, setStep] = useState();
    const [index, setIndex] = useState();
    const [modalTarget, setModalTarget] = useState();
    const { isOpen: isModalOpen , hide: dismissModal , show: showModal ,  } = useTransformModalState(setStep, setIndex);
    const onTransformRequested = useCallback((_step)=>{
        onAddStep && onAddStep(_step, _step?.id, index);
        dismissModal();
    }, [
        onAddStep,
        dismissModal,
        index
    ]);
    const onUndoStep = useCallback(()=>{
        onRemoveStep && onRemoveStep(workflow.steps.length - 1);
    }, [
        onRemoveStep,
        workflow
    ]);
    const onCallStep = useCallback((_, item)=>{
        const verb = item?.key;
        const target = item?.data?.id ? item?.data?.id : verb;
        const _step = readStep({
            verb,
            args: {
                to: selectedColumn,
                column: selectedColumn
            },
            input: inputTable?.id
        });
        setStep(_step);
        setModalTarget(target);
        showModal();
    }, [
        showModal,
        setStep,
        inputTable,
        selectedColumn,
        setModalTarget
    ]);
    const allTablesLength = useMemo(()=>{
        return workflow.outputNames.length + workflow.inputNames.size;
    }, [
        workflow
    ]);
    const columnCommands = useColumnCommands(onCallStep, !selectedColumn, color, background);
    const tableCommands = useTableCommands(onCallStep, allTablesLength <= 1, color, background);
    const undoCommands = useUndoCommands(onUndoStep, workflow.steps.length < 1, color, background);
    return /*#__PURE__*/ _jsxs(Container, {
        children: [
            /*#__PURE__*/ _jsxs(VerbsContainer, {
                children: [
                    /*#__PURE__*/ _jsx(CommandBar, {
                        ...undoCommands
                    }),
                    /*#__PURE__*/ _jsx(CommandBar, {
                        ...columnCommands
                    }),
                    /*#__PURE__*/ _jsx(CommandBar, {
                        ...tableCommands
                    })
                ]
            }),
            isModalOpen ? /*#__PURE__*/ _jsx(TableTransformModal, {
                hideInput: true,
                hideOutput: true,
                target: `#${modalTarget}`,
                step: step,
                index: index ?? workflow.steps.length,
                onTransformRequested: onTransformRequested,
                workflow: workflow,
                onDismiss: dismissModal,
                showGuidance: true
            }) : null
        ]
    });
});
const Container = styled.div``;
const VerbsContainer = styled.div`
	display: flex;
`;
