/*!
 * 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 { DataType } from '@datashaper/schema';
import { coerce } from '@datashaper/tables';
import styled from '@essex/styled-components';
import { ActionButton, Icon, IconButton } from '@fluentui/react';
import { memo, useMemo } from 'react';
import { useColumnType, useStepDataTable } from '../hooks/index.js';
import { useColumnValues, useDisabled, useHandleAddButtonClick, useHandleKeyChange, useHandleValueChange, useRecodeDelete } from './Recode.hooks.js';
import { DataTypeField } from './shared/DataTypeField.js';
/**
 * Provides inputs for a RecodeStep.
 */ export const Recode = /*#__PURE__*/ memo(function Recode({ step , workflow , input , table , onChange  }) {
    const dataTable = useStepDataTable(step, workflow, input, table);
    const dataType = useColumnType(dataTable, step.args.column);
    const initialValues = useColumnValues(step, dataTable);
    const values = dataType === DataType.Date ? initialValues.map((e)=>e.toISOString()) : initialValues;
    const handleRecodeKeyChange = useHandleKeyChange(step, onChange);
    const handleRecodeValueChange = useHandleValueChange(step, dataType, onChange);
    const handleRecodeDelete = useRecodeDelete(step, onChange);
    const handleButtonClick = useHandleAddButtonClick(step, values, onChange);
    const columnPairs = useRecodePairs(step, dataType, handleRecodeKeyChange, handleRecodeValueChange, handleRecodeDelete);
    const disabled = useDisabled(step, values);
    return /*#__PURE__*/ _jsxs(Container, {
        children: [
            /*#__PURE__*/ _jsx(ColumnPairs, {
                children: columnPairs
            }),
            /*#__PURE__*/ _jsx(ActionButton, {
                onClick: handleButtonClick,
                iconProps: addIconProps,
                disabled: disabled,
                children: "Add mapping"
            })
        ]
    });
});
function useRecodePairs(step, dataType, onKeyChange, onValueChange, onDelete) {
    return useMemo(()=>{
        const { mapping  } = step.args;
        return Object.entries(mapping || {}).map((valuePair, index)=>{
            return /*#__PURE__*/ _jsx(ColumnPair, {
                valuePair: valuePair,
                dataType: dataType,
                onKeyChange: onKeyChange,
                onValueChange: onValueChange,
                onDelete: onDelete
            }, `column-Recode-${index}`);
        });
    }, [
        step,
        dataType,
        onKeyChange,
        onValueChange,
        onDelete
    ]);
}
const ColumnPair = /*#__PURE__*/ memo(function ColumnPair({ valuePair , dataType , onKeyChange , onValueChange , 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, q] = valuePair;
    let keyValue = coerce(o, dataType);
    const propertyValue = coerce(q, dataType);
    if (dataType === DataType.Boolean) {
        o === 'false' ? keyValue = false : keyValue = true;
    }
    const handleDeleteClick = ()=>onDelete(dataType === DataType.Date ? keyValue.toISOString() : keyValue);
    return /*#__PURE__*/ _jsxs(ColumnPairContainer, {
        children: [
            /*#__PURE__*/ _jsx(DataTypeField, {
                placeholder: 'Current value',
                dataType: dataType,
                value: keyValue,
                onKeyChange: onKeyChange,
                onValueChange: onKeyChange,
                isKey: true,
                keyValue: keyValue
            }),
            /*#__PURE__*/ _jsx(Icon, {
                iconName: 'Forward',
                styles: {
                    root: {
                        marginLeft: 4,
                        marginRight: 4
                    }
                }
            }),
            /*#__PURE__*/ _jsx(DataTypeField, {
                placeholder: 'New Value',
                dataType: dataType,
                keyValue: keyValue,
                value: propertyValue,
                onKeyChange: onValueChange,
                onValueChange: onValueChange,
                isKey: false
            }),
            /*#__PURE__*/ _jsx(IconButton, {
                title: 'Remove this Recode',
                iconProps: deleteIconProps,
                onClick: handleDeleteClick
            })
        ]
    });
});
const Container = styled.div`
	display: flex;
	flex-direction: column;
`;
const ColumnPairs = styled.div`
	margin-top: 8px;
	display: flex;
	flex-direction: column;
	gap: 5px;
`;
const ColumnPairContainer = styled.div`
	display: flex;
	justify-content: flex-start;
	align-items: center;
`;
const addIconProps = {
    iconName: 'Add'
};
const deleteIconProps = {
    iconName: 'Delete'
};
