import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { isInputColumnStep, isInputTableStep, isOutputColumnStep } from '@data-wrangling-components/core';
import { NodeInput } from '@essex/dataflow';
import { TextField } from '@fluentui/react';
import { memo } from 'react';
import { TableColumnDropdown } from '../controls/TableColumnDropdown.js';
import { TableDropdown } from '../controls/TableDropdown.js';
import { useDataTable } from '../hooks/useDataTable.js';
import { useSimpleDropdownOptions } from '../hooks/useSimpleDropdownOptions.js';
import { useTableColumnNames } from '../hooks/useTableColumnNames.js';
import { useTableNames } from '../hooks/useTableNames.js';
import { dropdownStyles } from '../styles.js';
import { useColumnFilter, useDefaultOutputNameInitially, useInputColumnChanged, useInputTableChanged, useOutputColumnChanged, useOutputTableChanged, useStepArgsComponent, useStepChangeHandler } from './StepComponent.hooks.js';
import { Container } from './StepComponent.styles.js';
/**
 * Let's us render the Steps in a loop while memoing all the functions
 */ export const StepComponent = /*#__PURE__*/ memo(function StepComponent({ step: s , output , graph: g , index , inputTableLabel , inputColumnLabel , outputColumnLabel , outputTableLabel , outputTableDisabled , onChange , onChangeOutput: changeOutput ,  }) {
    /* Current Table Selection */ const tableId = s.input[NodeInput.Source]?.node;
    const table = useDataTable(tableId, g);
    /* Table Options */ const tables = useTableNames(g);
    const tableOptions = useSimpleDropdownOptions(tables);
    /* Column Options */ const columns = useTableColumnNames(table, useColumnFilter(s, table));
    const columnOptions = useSimpleDropdownOptions(columns);
    /* The step args component */ const StepArgs = useStepArgsComponent(s);
    /* Change Events */ const change = useStepChangeHandler(index, onChange);
    const onInputTableChange = useInputTableChanged(s, g, change);
    const onInputColumnChange = useInputColumnChanged(s, change);
    const onOutputColumnChange = useOutputColumnChanged(s, change);
    const onOutputTableChange = useOutputTableChanged(s, changeOutput, change);
    /* Side Effects */ useDefaultOutputNameInitially(s, output, changeOutput);
    return StepArgs == null ? null : /*#__PURE__*/ _jsxs(Container, {
        className: "step-component",
        children: [
            isInputTableStep(s) ? /*#__PURE__*/ _jsx(TableDropdown, {
                required: true,
                options: tableOptions,
                label: inputTableLabel || 'Input table',
                selectedKey: tableId ?? null,
                onChange: onInputTableChange
            }) : null,
            isInputColumnStep(s) ? /*#__PURE__*/ _jsx(TableColumnDropdown, {
                required: true,
                options: columnOptions,
                label: inputColumnLabel || `Column to ${s.verb}`,
                selectedKey: s.args.column,
                onChange: onInputColumnChange
            }) : null,
            /*#__PURE__*/ _jsx(StepArgs, {
                step: s,
                graph: g,
                output: output,
                onChangeOutput: changeOutput,
                onChange: change
            }),
            isOutputColumnStep(s) ? /*#__PURE__*/ _jsx(TextField, {
                required: true,
                label: outputColumnLabel || 'New column name',
                placeholder: 'Column name',
                value: s.args.to,
                styles: dropdownStyles,
                onChange: onOutputColumnChange
            }) : null,
            /*#__PURE__*/ _jsx(TextField, {
                required: true,
                disabled: outputTableDisabled,
                label: outputTableLabel || 'Output table',
                placeholder: 'Table name',
                value: output ?? s.id,
                styles: dropdownStyles,
                onChange: onOutputTableChange
            })
        ]
    });
});
