"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CompareChangesLayer = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_diff_viewer_1 = tslib_1.__importDefault(require("@mockingjay-io/react-diff-viewer"));
const core_1 = require("@material-ui/core");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const UILayer_1 = require("../../BuildlingBlocks/UILayer");
const Link_1 = require("../../BuilderUI/Link");
const StyledButton_1 = require("../../BuildlingBlocks/StyledButton");
const CompareChangesLayer = ({ oldValue, newValue, onApply, onCancel, title }) => {
    return ((0, jsx_runtime_1.jsx)(UILayer_1.UILayer, { open: true, maxWidth: "lg", fullWidth: true, renderUI: () => {
            return ((0, jsx_runtime_1.jsxs)(DiffLayerView, { children: [(0, jsx_runtime_1.jsx)(core_1.Typography, { variant: "h5", children: title }), (0, jsx_runtime_1.jsx)(DiffView, { children: (0, jsx_runtime_1.jsx)(react_diff_viewer_1.default, { oldValue: oldValue, newValue: newValue, splitView: true, showDiffOnly: false }) }), (0, jsx_runtime_1.jsxs)(GroupButtons, { children: [(0, jsx_runtime_1.jsx)(Link_1.StyledLink, { onClick: onCancel, children: "Cancel" }), (0, jsx_runtime_1.jsx)(StyledButton_1.StyledButton, { color: "primary", variant: "contained", onClick: onApply, children: "Apply" })] })] }));
        } }));
};
exports.CompareChangesLayer = CompareChangesLayer;
const DiffLayerView = styled_components_1.default.div `
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .MuiTypography-root.MuiTypography-h5 {
        padding: 6px;

        font-size: 20px;
        font-style: normal;
        font-weight: 600;
    }
`;
const DiffView = styled_components_1.default.div `
    overflow: auto;
    flex: 1;
`;
const GroupButtons = styled_components_1.default.div `
    display: flex;
    align-items: center;
    padding: 10px;
    justify-content: flex-end;

    > *:first-child {
        margin-right: 10px;
    }
`;
//# sourceMappingURL=CompareChangesLayer.js.map