/*!
 * 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 { default as guidanceIndex } from '@datashaper/verb-guidance';
import { Callout, DirectionalHint, IconButton, useTheme } from '@fluentui/react';
import { useBoolean } from '@fluentui/react-hooks';
import { memo, useState } from 'react';
import { Guidance } from './Guidance.js';
import { TableTransform } from './TableTransform.js';
import { ContainerBody, GuidanceContainer, Header, icons, StepComponentContainer, Title } from './TableTransformModal.styles.js';
import { getModalStyles } from './TableTransformModal.utils.js';
export const TableTransformModal = /*#__PURE__*/ memo(function TableTransformModal({ onDismiss , workflow , onTransformRequested , index , step , styles , ...props }) {
    const theme = useTheme();
    const [verb, setVerb] = useState(step?.verb);
    const [showGuidance, { toggle: toggleGuidance  }] = useBoolean(false);
    const adaptedStyles = getModalStyles(theme, styles);
    return /*#__PURE__*/ _jsxs(Callout, {
        styles: adaptedStyles,
        directionalHint: DirectionalHint.rightBottomEdge,
        ...props,
        children: [
            /*#__PURE__*/ _jsxs(Header, {
                children: [
                    /*#__PURE__*/ _jsx(Title, {
                        children: step ? `${step.verb.toUpperCase()} ${step.args.column ? `${step.args.column}` : ''}` : 'New step'
                    }),
                    onDismiss && /*#__PURE__*/ _jsx(IconButton, {
                        iconProps: icons.cancel,
                        ariaLabel: "Close popup modal",
                        onClick: ()=>onDismiss()
                    })
                ]
            }),
            /*#__PURE__*/ _jsxs(ContainerBody, {
                children: [
                    /*#__PURE__*/ _jsx(StepComponentContainer, {
                        children: /*#__PURE__*/ _jsx(TableTransform, {
                            hideInput: props.hideInput,
                            hideOutput: props.hideOutput,
                            hideStepSelector: props.hideInput && props.hideOutput,
                            hideInputColumn: props.hideInput && props.hideOutput,
                            workflow: workflow,
                            onTransformRequested: onTransformRequested,
                            index: index,
                            step: step,
                            showGuidance: showGuidance,
                            toggleGuidance: toggleGuidance,
                            onVerbChange: setVerb,
                            showGuidanceButton: true
                        })
                    }),
                    showGuidance && verb ? /*#__PURE__*/ _jsx(GuidanceContainer, {
                        children: /*#__PURE__*/ _jsx(Guidance, {
                            name: verb,
                            index: guidanceIndex
                        })
                    }) : null
                ]
            })
        ]
    });
});
