import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ActionButton, Icon, IconButton, Label, TextField } from '@fluentui/react';
import { memo, useMemo } from 'react';
import styled from 'styled-components';
import { TableColumnDropdown } from '../controls/index.js';
import { useColumnRecordDelete, useSimpleDropdownOptions, useStepDataTable, useTableColumnNames } from '../hooks/index.js';
import { useDisabled, useHandleAddButtonClick, useHandleColumnChange } from './Rename.hooks.js';
/**
 * Provides inputs for a RenameStep.
 */ export const Rename = /*#__PURE__*/ memo(function Rename({ step , graph , input , table , onChange  }) {
    const dataTable = useStepDataTable(step, graph, input, table);
    const handleColumnChange = useHandleColumnChange(step, onChange);
    const handleColumnDelete = useColumnRecordDelete(step, onChange);
    const handleButtonClick = useHandleAddButtonClick(step, dataTable, onChange);
    const columnPairs = useColumnPairs(dataTable, step, handleColumnChange, handleColumnDelete);
    const disabled = useDisabled(step, dataTable);
    return /*#__PURE__*/ _jsxs(Container, {
        children: [
            /*#__PURE__*/ _jsx(Label, {
                required: true,
                children: "Column renames"
            }),
            /*#__PURE__*/ _jsx(ColumnPairs, {
                children: columnPairs
            }),
            /*#__PURE__*/ _jsx(ActionButton, {
                onClick: handleButtonClick,
                iconProps: {
                    iconName: 'Add'
                },
                disabled: disabled,
                children: "Add rename"
            })
        ]
    });
});
function useColumnPairs(table, step, onChange, onDelete) {
    return useMemo(()=>{
        const { columns  } = step.args;
        return Object.entries(columns || {}).map((column, index)=>{
            const [oldname] = column;
            return /*#__PURE__*/ _jsx(ColumnPair, {
                table: table,
                column: column,
                step: step,
                onChange: onChange,
                onDelete: onDelete
            }, `column-rename-${oldname}-${index}`);
        });
    }, [
        table,
        step,
        onChange,
        onDelete
    ]);
}
const ColumnPair = /*#__PURE__*/ memo(function ColumnPair({ table , column , step , onChange , onDelete  }) {
    const [oldname, newname] = column;
    const columnFilter = (name)=>{
        if (name === oldname) {
            return true;
        }
        if (step.args.columns && step.args.columns[name]) {
            return false;
        }
        return true;
    };
    const handleColumnChange = (_e, opt)=>onChange(oldname, opt?.key || oldname, newname);
    const handleTextChange = (_e, newValue)=>{
        onChange(oldname, oldname, newValue ?? '');
    };
    const handleDeleteClick = ()=>onDelete(oldname);
    const columns = useTableColumnNames(table, columnFilter);
    const options = useSimpleDropdownOptions(columns);
    return /*#__PURE__*/ _jsxs(ColumnPairContainer, {
        children: [
            /*#__PURE__*/ _jsx(TableColumnDropdown, {
                options: options,
                label: undefined,
                selectedKey: oldname,
                onChange: handleColumnChange,
                styles: {
                    root: {
                        width: 130
                    }
                }
            }),
            /*#__PURE__*/ _jsx(Icon, {
                iconName: 'Forward',
                styles: {
                    root: {
                        marginLeft: 4,
                        marginRight: 4
                    }
                }
            }),
            /*#__PURE__*/ _jsx(TextField, {
                placeholder: 'New name',
                value: newname,
                onChange: handleTextChange,
                styles: {
                    root: {
                        width: 130
                    }
                }
            }),
            /*#__PURE__*/ _jsx(IconButton, {
                title: 'Remove this rename',
                iconProps: {
                    iconName: 'Delete'
                },
                onClick: handleDeleteClick
            })
        ]
    });
});
const Container = styled.div`
	display: flex;
	flex-direction: column;
`;
const ColumnPairs = styled.div`
	display: flex;
	flex-direction: column;
	gap: 5px;
`;
const ColumnPairContainer = styled.div`
	display: flex;
	justify-content: space-between;
	align-items: center;
`;
