/*!
 * Copyright (c) Microsoft. All rights reserved.
 * Licensed under the MIT license. See LICENSE file in the project.
 */ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { ActionButton, IconButton } from '@fluentui/react';
import { isEqual } from 'lodash-es';
import React, { memo, useCallback, useMemo } from 'react';
import { StepComponent } from './StepComponent.js';
import { StepSelector } from './StepSelector.js';
import { useHandleSaveClick, useInternalTableStep, useStepOutputHandling } from './TableTransform.hooks.js';
import { ButtonContainer, Container, Flex, icons, rightButtonStyles, SaveButtonWrapper, StepSelectorContainer } from './TableTransform.styles.js';
export const TableTransform = /*#__PURE__*/ memo(function TableTransform({ workflow , onTransformRequested , metadata , index , step , showGuidance , showGuidanceButton , toggleGuidance , onVerbChange , style ={} , hideStepSelector , onDelete , hideInput , hideOutput , hideInputColumn ,  }) {
    const { internal , setInternal , handleVerbChange  } = useInternalTableStep(step, workflow);
    const { output , outputHasChanged , onOutputChanged  } = useStepOutputHandling(workflow, step);
    const handleSaveClick = useHandleSaveClick(internal, onTransformRequested);
    const onCreate = useCallback((verb)=>{
        onVerbChange?.(verb);
        handleVerbChange(verb);
    }, [
        handleVerbChange,
        onVerbChange
    ]);
    const disableSave = useMemo(()=>{
        return isEqual(step, internal) && !hideOutput && !outputHasChanged;
    }, [
        step,
        internal,
        outputHasChanged,
        hideOutput
    ]);
    return /*#__PURE__*/ _jsxs(Container, {
        style: style,
        children: [
            hideStepSelector && showGuidanceButton && internal?.verb ? /*#__PURE__*/ _jsx(IconButton, {
                onClick: toggleGuidance,
                iconProps: icons.info,
                checked: showGuidance,
                styles: rightButtonStyles
            }) : null,
            !hideStepSelector ? /*#__PURE__*/ _jsxs(StepSelectorContainer, {
                children: [
                    /*#__PURE__*/ _jsx(StepSelector, {
                        placeholder: "Select a verb",
                        verb: internal?.verb,
                        onCreate: onCreate
                    }),
                    showGuidanceButton && internal?.verb ? /*#__PURE__*/ _jsx(IconButton, {
                        onClick: toggleGuidance,
                        iconProps: icons.info,
                        checked: showGuidance
                    }) : null
                ]
            }) : null,
            internal && /*#__PURE__*/ _jsxs(_Fragment, {
                children: [
                    /*#__PURE__*/ _jsx(StepComponent, {
                        step: internal,
                        workflow: workflow,
                        metadata: metadata,
                        index: index,
                        output: output,
                        onChangeOutput: onOutputChanged,
                        onChange: setInternal,
                        hideInput: hideInput,
                        hideOutput: hideOutput,
                        hideInputColumn: hideInputColumn
                    }),
                    /*#__PURE__*/ _jsxs(ButtonContainer, {
                        children: [
                            /*#__PURE__*/ _jsx(Flex, {
                                children: /*#__PURE__*/ _jsx(SaveButtonWrapper, {
                                    children: /*#__PURE__*/ _jsx(ActionButton, {
                                        onClick: handleSaveClick,
                                        iconProps: icons.checkMark,
                                        disabled: disableSave,
                                        children: "Save"
                                    })
                                })
                            }),
                            onDelete ? /*#__PURE__*/ _jsx(IconButton, {
                                onClick: ()=>onDelete(index),
                                iconProps: icons.delete
                            }) : null
                        ]
                    })
                ]
            })
        ]
    });
});
