import React from 'react';
import { makeStyles, useTheme, lighten } from '@material-ui/core';
import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer';
import { greyScale } from '../utilities/style/verticalStyles';
const useStyles = makeStyles((theme) => ({
    root: {}
}));
export const DiffChecker = ({ leftTitle, rightTitle, oldValue, newValue }) => {
    const classes = useStyles();
    const theme = useTheme();
    const lightValue = 0.9;
    const medValue = 0.5;
    const newStyles = {
        variables: {
            light: {
                addedBackground: lighten(theme.palette.success.light, lightValue),
                removedBackground: lighten(theme.palette.error.light, lightValue),
                wordAddedBackground: lighten(theme.palette.success.light, medValue),
                wordRemovedBackground: '#fdb8c0',
                addedGutterBackground: lighten(theme.palette.success.light, medValue),
                removedGutterBackground: lighten(theme.palette.error.light, medValue),
                gutterBackground: greyScale('main'),
                codeFoldGutterBackground: lighten(theme.palette.primary.main, 0.8),
                codeFoldBackground: lighten(theme.palette.primary.main, lightValue),
                emptyLineBackground: greyScale('light')
            }
        }
    };
    return (React.createElement("div", { className: classes.root }, React.createElement(ReactDiffViewer, { oldValue: oldValue, newValue: newValue, splitView: true, compareMethod: DiffMethod.WORDS, styles: newStyles, leftTitle: leftTitle, rightTitle: rightTitle })));
};
//# sourceMappingURL=DiffChecker.js.map