import React from 'react';
import {
  NODE_SHAPE_HIGHLIGHT_RADIUS,
  NODE_SHAPE_BORDER_RADIUS,
  NODE_SHAPE_SHADOW_RADIUS,
  NODE_SHAPE_DOT_RADIUS,
  NODE_BASE_SIZE,
} from '../constants/styles';

// This path is already normalized so no dynamic rescaling is needed.
const CLOUD_PATH = 'M-125 23.333Q-125 44.036-110.352 58.685-95.703 73.333-75 73.333H66.667Q90.755 '
  + '73.333 107.878 56.211 125 39.089 125 15 125-2.188 115.755-16.445 106.51-30.703 91.406-37.734q'
  + '0.26-3.646 0.261-5.599 0-27.604-19.532-47.136-19.531-19.531-47.135-19.531-20.573 0-37.305 '
  + '11.458-16.732 11.458-24.414 29.948-9.115-8.073-21.614-8.073-13.802 0-23.568 9.766-9.766 9.766-'
  + '9.766 23.568 0 9.766 5.339 17.968-16.797 3.906-27.735 17.513-10.938 13.607-10.937 31.185z';

export default function NodeShapeCloud({ highlighted, color }) {
  const pathProps = r => ({ d: CLOUD_PATH, transform: `scale(${r / NODE_BASE_SIZE})` });

  return (
    <g className="shape shape-cloud">
      {highlighted && <path className="highlighted" {...pathProps(NODE_SHAPE_HIGHLIGHT_RADIUS)} />}
      <path className="border" stroke={color} {...pathProps(NODE_SHAPE_BORDER_RADIUS)} />
      <path className="shadow" {...pathProps(NODE_SHAPE_SHADOW_RADIUS)} />
      <circle className="node" r={NODE_SHAPE_DOT_RADIUS} />
    </g>
  );
}