import React, { useState } from 'react';
import i18n from 'ui-i18n';
import { assoc, dissoc } from 'ramda';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import { CrosswalkAttributes } from '../CrosswalkAttributes';
import { useStyles } from './styles';
export var CrosswalkEditor = function (_a) {
    var className = _a.className, onAdd = _a.onAdd, onClose = _a.onClose;
    var styles = useStyles();
    var _b = useState({ type: '', value: '' }), newCrosswalk = _b[0], setNewCrosswalk = _b[1];
    var handleAdd = function () {
        onAdd(newCrosswalk);
        onClose();
    };
    return (React.createElement("div", { className: className, "data-reltio-id": "reltio-crosswalk-editor" },
        React.createElement(Typography, { variant: 'body1', className: styles.caption }, i18n.text('Add crosswalk')),
        React.createElement(CrosswalkAttributes, { crosswalk: newCrosswalk, onDeleteAttribute: function (attributeName) {
                setNewCrosswalk(dissoc(attributeName));
            }, onEditAttribute: function (attributeName, value) {
                setNewCrosswalk(assoc(attributeName, value));
            } }),
        React.createElement("div", { className: styles.controlButtons },
            React.createElement(Button, { className: styles.cancelButton, onClick: onClose }, i18n.text('Cancel')),
            React.createElement(Button, { color: "primary", onClick: handleAdd, disabled: !newCrosswalk.type || !newCrosswalk.value }, i18n.text('Add')))));
};
