import React, { useEffect, useState } from "react"; // eslint-disable-line
import { Button } from "../common/Button";
import { FinsembleIcon } from "../common/FinsembleIcon";
import { BloombergRelay } from "./BloombergRelay";
export const BloombergLink = ({ link, onChange, onDelete }) => {
    const [source, setSource] = useState({ ...link.source });
    const [target, setTarget] = useState({ ...link.target });
    const [bidirectional, setIsBidirectional] = useState(link.bidirectional === true);
    const [changesPending, setChangesPending] = useState(false);
    const detectChangesPending = () => JSON.stringify({ source: link.source, target: link.target, bidirectional: link.bidirectional === true }) !==
        JSON.stringify({ source, target, bidirectional });
    useEffect(() => {
        setSource(link.source);
        setTarget(link.target);
        setIsBidirectional(link.bidirectional === true);
    }, [link]);
    useEffect(() => {
        setChangesPending(detectChangesPending());
    }, [source, target, bidirectional]);
    return (React.createElement("div", { className: "bloomberg-link" },
        React.createElement("div", { className: "bloomberg-link-fields" },
            React.createElement(FinsembleIcon, { className: "bloomberg-link-delete", icon: "close", onClick: () => onDelete() }),
            React.createElement("div", { className: "bloomberg-link-source" },
                React.createElement(BloombergRelay, { config: source, onChange: (relay) => {
                        setSource(relay);
                    } })),
            React.createElement("div", { className: "bloomberg-link-direction" },
                React.createElement("select", { onChange: (e) => {
                        setIsBidirectional(e.currentTarget.value === "bidirectional");
                    }, value: bidirectional ? "bidirectional" : "source-to-target" },
                    React.createElement("option", { value: "source-to-target" }, "->"),
                    React.createElement("option", { value: "bidirectional" }, "<->"))),
            React.createElement("div", { className: "bloomberg-link-target" },
                React.createElement(BloombergRelay, { config: target, onChange: (relay) => {
                        setTarget(relay);
                    } }))),
        changesPending && (React.createElement("div", null,
            React.createElement(Button, { fashion: "secondary", text: "Cancel", onClick: () => {
                    setSource({ ...link.source });
                    setTarget({ ...link.target });
                    setIsBidirectional(link.bidirectional === true);
                    setChangesPending(false);
                } }),
            React.createElement(Button, { fashion: "primary", text: "Save", onClick: () => {
                    onChange({ source, target, bidirectional });
                    setChangesPending(false);
                } })))));
};
//# sourceMappingURL=BloombergLink.js.map