import { Pvjs } from '@wikipathways/pvjs';
import React from 'react';
import './index.css';
import PropTypes from 'prop-types';

const Diagram = props => {
  const onPvjsReady = ({ entities, manipulator }) => {
    const { onReady } = props;
    if (onReady) onReady({ entities, manipulator });
  };

  const {
    wpId,
    version,
    showPanZoomControls,
    isHidden,
    slide,
    detailPanelEnabled,
    onEntityClick
  } = props;
  const targets = slide.targets;

  const getEntityIds = entities =>
    entities.map(singleEntity => singleEntity.entityId);

  const highlightedEntities = targets
    .filter(singleTarget => singleTarget.highlighted)
    .map(singleTarget =>
      Object.assign(
        {},
        {
          entityId: singleTarget.entityId,
          color: singleTarget.highlightedColor
        }
      )
    );
  const pannedEntities = getEntityIds(
    targets.filter(singleTarget => singleTarget.panned)
  );
  const zoomedEntities = getEntityIds(
    targets.filter(singleTarget => singleTarget.zoomed)
  );
  const hiddenEntities = getEntityIds(
    targets.filter(singleTarget => singleTarget.hidden)
  );

  return (
    <div className={`diagram-wrapper ${isHidden ? 'isHidden' : ''}`}>
      <Pvjs
        wpId={wpId}
        version={version}
        showPanZoomControls={showPanZoomControls}
        detailPanelEnabled={detailPanelEnabled}
        onEntityClick={onEntityClick}
        highlightedEntities={highlightedEntities}
        pannedEntities={pannedEntities}
        zoomedEntities={zoomedEntities}
        hiddenEntities={hiddenEntities}
        onReady={onPvjsReady}
      />
    </div>
  );
};

Diagram.propTypes = {
  wpId: PropTypes.string.isRequired,
  version: PropTypes.number.isRequired,
  showPanZoomControls: PropTypes.bool.isRequired,
  onReady: PropTypes.func,
  slide: PropTypes.shape({
    targets: PropTypes.array.isRequired
  }).isRequired,
  isHidden: PropTypes.bool,
  detailPanelEnabled: PropTypes.bool,
  onEntityClick: PropTypes.func
};

Diagram.defaultProps = {
  hidden: false,
  detailPanelEnabled: true
};

export default Diagram;

@@ -422,52 +422,60 @@
 lick
+,
 %0A  
-%7D = props;%0A  const targets = slide.target
+  panZoomLocked,%0A    onPanZoomChanged%0A  %7D = prop
 s;%0A%0A
@@ -846,206 +846,63 @@
  );%0A
+%0A
   const
+ %7B
  pan
-nedEntities = getEntityIds(%0A    targets.filter(singleTarget =%3E singleTarget.panned)%0A  );%0A  const zoomedEntities = getEntityIds(%0A    targets.filter(singleTarget
+Coordinates, zoomLevel, targets %7D
  =
-%3E
  s
-ingleTarget.zoomed)%0A  )
+lide
 ;%0A  
@@ -1189,16 +1189,53 @@
 ntrols%7D%0A
+        panZoomLockd=%7BpanZoomLocked%7D%0A
         
@@ -1377,75 +1377,109 @@
  pan
-nedEntities=%7BpannedEntities%7D%0A        zoomedEntities=%7BzoomedEntities
+Coordinates=%7BpanCoordinates%7D%0A        onPanZoomChanged=%7BonPanZoomChanged%7D%0A        zoomLevel=%7BzoomLevel
 %7D%0A  

Prepare Diagram for using panCoordinates & zoomLevel