import React from "react";

const groupDiffs = (from, to, parseValue, parseKey) => {
  return mergeKeys(from, to).reduce((groups, key) => {
    const group = groupFn(key, from[key], to[key]);
    
    const name = parseKey ? parseKey(key) : key;
    const from = parseValue ? parseValue(key, from) : from;
    const to = parseValue ? parseValue(key, to) : to;

    return [
      ...groups,
      {
        name,
        from,
        to,
        changed: from !== to
      }
    ]);
  }, []);
};

const DiffView = ({ from, to, parseValue, parseKey }) => {
  const groups = groupDiffs(from, to, parseValue, parseKey);

  return (
    <ul>
      {groups.map(group => (
        <li key={group.name}>
          <h3>{group.name}</h3>
          <div style={group.changes ? { color: "red" } : {}}>{group.from}</div>
          {group.changes && (
            <div style={group.changes && { color: "green" }}>{group.to}</div>
          )}
        </li>
      ))}
    </ul>
  );
};

DiffView.propTypes = {
  /* Baseline object */
  from: PropTypes.object,
  /* Comparison object */
  to: PropTypes.object,
  /* Function used to transform each individual value in the object */ 
  parseValue: PropTypes.func,
  /* Function used to transfrom each individual key in the object */
  parseKey: PropTypes.func
};

export default DiffView;