import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { default as guidanceIndex } from '@data-wrangling-components/verb-guidance';
import { Callout, DirectionalHint, IconButton, PrimaryButton } from '@fluentui/react';
import { useBoolean } from '@fluentui/react-hooks';
import { memo } from 'react';
import { Guidance } from './Guidance.js';
import { StepComponent } from './StepComponent.js';
import { StepSelector } from './StepSelector.js';
import { useHandleSaveClick, useInternalTableStep, useModalStyles, useStepOutputHandling } from './TableTransformModal.hooks.js';
import { ButtonContainer, ContainerBody, GuidanceContainer, Header, icons, StepComponentContainer, StepSelectorContainer, Title } from './TableTransformModal.styles.js';
export const TableTransformModal = /*#__PURE__*/ memo(function TableTransformModal({ onDismiss , graph , onTransformRequested , index , step , nextInputTable , styles , ...props }) {
    const [showGuidance, { toggle: toggleGuidance  }] = useBoolean(false);
    const { internal , setInternal , handleVerbChange  } = useInternalTableStep(step, nextInputTable, graph);
    const adaptedStyles = useModalStyles(styles, showGuidance);
    const { output , onOutputChanged  } = useStepOutputHandling(graph, step);
    const handleSaveClick = useHandleSaveClick(internal, output, onTransformRequested);
    return /*#__PURE__*/ _jsxs(Callout, {
        onDismissed: ()=>setInternal(undefined),
        styles: adaptedStyles,
        directionalHint: DirectionalHint.rightBottomEdge,
        ...props,
        children: [
            /*#__PURE__*/ _jsxs(Header, {
                children: [
                    /*#__PURE__*/ _jsx(Title, {
                        children: step ? 'Edit step' : 'New step'
                    }),
                    onDismiss && /*#__PURE__*/ _jsx(IconButton, {
                        iconProps: icons.cancel,
                        ariaLabel: "Close popup modal",
                        onClick: ()=>onDismiss()
                    })
                ]
            }),
            /*#__PURE__*/ _jsxs(ContainerBody, {
                showGuidance: showGuidance,
                children: [
                    /*#__PURE__*/ _jsxs(StepComponentContainer, {
                        children: [
                            /*#__PURE__*/ _jsxs(StepSelectorContainer, {
                                children: [
                                    /*#__PURE__*/ _jsx(StepSelector, {
                                        placeholder: "Select a verb",
                                        verb: internal?.verb,
                                        onCreate: handleVerbChange
                                    }),
                                    internal?.verb ? /*#__PURE__*/ _jsx(IconButton, {
                                        onClick: toggleGuidance,
                                        iconProps: icons.info,
                                        checked: showGuidance
                                    }) : null
                                ]
                            }),
                            internal && /*#__PURE__*/ _jsxs(_Fragment, {
                                children: [
                                    /*#__PURE__*/ _jsx(StepComponent, {
                                        step: internal,
                                        graph: graph,
                                        index: index,
                                        output: output,
                                        onChangeOutput: onOutputChanged,
                                        onChange: setInternal
                                    }),
                                    /*#__PURE__*/ _jsx(ButtonContainer, {
                                        children: /*#__PURE__*/ _jsx(PrimaryButton, {
                                            onClick: handleSaveClick,
                                            children: "Save"
                                        })
                                    })
                                ]
                            })
                        ]
                    }),
                    showGuidance && internal?.verb ? /*#__PURE__*/ _jsx(GuidanceContainer, {
                        children: /*#__PURE__*/ _jsx(Guidance, {
                            name: internal?.verb,
                            index: guidanceIndex
                        })
                    }) : null
                ]
            })
        ]
    });
});
