import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { coerce } from '@essex/arquero';
import { ActionButton, Icon, IconButton, TextField } from '@fluentui/react';
import { memo, useMemo } from 'react';
import styled from 'styled-components';
import { ColumnValueDropdown } from '../controls/index.js';
import { useColumnType, useColumnValueOptions, useStepDataTable } from '../hooks/index.js';
import { useColumnValues, useDisabled, useHandleAddButtonClick, useHandleRecodeChange, useRecodeDelete } from './Recode.hooks.js';
/**
 * Provides inputs for a RecodeStep.
 */ export const Recode = /*#__PURE__*/ memo(function Recode({ step , graph , input , table , onChange  }) {
    const dataTable = useStepDataTable(step, graph, input, table);
    const values = useColumnValues(step, dataTable);
    const dataType = useColumnType(dataTable, step.args.column);
    const handleRecodeChange = useHandleRecodeChange(step, onChange);
    const handleRecodeDelete = useRecodeDelete(step, onChange);
    const handleButtonClick = useHandleAddButtonClick(step, values, onChange);
    const columnPairs = useRecodePairs(dataTable, step, dataType, handleRecodeChange, handleRecodeDelete);
    const disabled = useDisabled(step, values);
    return /*#__PURE__*/ _jsxs(Container, {
        children: [
            columnPairs,
            /*#__PURE__*/ _jsx(ActionButton, {
                onClick: handleButtonClick,
                iconProps: {
                    iconName: 'Add'
                },
                disabled: disabled,
                children: "Add mapping"
            })
        ]
    });
});
function useRecodePairs(table, step, dataType, onChange, onDelete) {
    return useMemo(()=>{
        const { map  } = step.args;
        return Object.entries(map || {}).map((valuePair, index)=>{
            const [o] = valuePair;
            const oldvalue = coerce(o, dataType);
            return /*#__PURE__*/ _jsx(ColumnPair, {
                step: step,
                table: table,
                valuePair: valuePair,
                dataType: dataType,
                onChange: onChange,
                onDelete: onDelete
            }, `column-Recode-${oldvalue}-${index}`);
        });
    }, [
        table,
        step,
        dataType,
        onChange,
        onDelete
    ]);
}
const ColumnPair = /*#__PURE__*/ memo(function ColumnPair({ valuePair , step , table , dataType , onChange , onDelete ,  }) {
    // the old value will always come off the map as a string key
    // coerce it to the column type for proper comparison
    const [o, newvalue] = valuePair;
    const oldvalue = coerce(o, dataType);
    const valueFilter = (value)=>{
        if (value === oldvalue) {
            return true;
        }
        if (step.args.map && step.args.map[value]) {
            return false;
        }
        return true;
    };
    const handleSourceChange = (_e, opt)=>onChange(oldvalue, opt?.key || oldvalue, newvalue);
    const handleTextChange = (_e, newValue)=>{
        // this does force the new value to match the old type, preventing mappings like 0 -> false
        const val = coerce(newValue, dataType);
        onChange(oldvalue, oldvalue, val);
    };
    const handleDeleteClick = ()=>onDelete(oldvalue);
    const options = useColumnValueOptions(step.args.column, table, undefined, valueFilter);
    return /*#__PURE__*/ _jsxs(ColumnPairContainer, {
        children: [
            /*#__PURE__*/ _jsx(ColumnValueDropdown, {
                options: options,
                label: undefined,
                selectedKey: oldvalue,
                onChange: handleSourceChange,
                styles: {
                    root: {
                        width: 130
                    }
                }
            }),
            /*#__PURE__*/ _jsx(Icon, {
                iconName: 'Forward',
                styles: {
                    root: {
                        marginLeft: 4,
                        marginRight: 4
                    }
                }
            }),
            /*#__PURE__*/ _jsx(TextField, {
                placeholder: 'New value',
                value: newvalue,
                onChange: handleTextChange,
                styles: {
                    root: {
                        width: 130
                    }
                }
            }),
            /*#__PURE__*/ _jsx(IconButton, {
                title: 'Remove this Recode',
                iconProps: {
                    iconName: 'Delete'
                },
                onClick: handleDeleteClick
            })
        ]
    });
});
const Container = styled.div`
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
`;
const ColumnPairContainer = styled.div`
	display: flex;
	justify-content: space-between;
	align-items: center;
`;
