import React, { Component } from 'react';

export function createRef() {
  const refObject = {
    current: null,
  };
  return refObject;
}

export default function D3blackbox(D3render) {
  return class Blackbox extends React.Component {
    anchor = {
      current: null,
    };

    anchorRef = element => (this.anchor.current = element);

    componentDidMount() {
      D3render(this.anchor, this.props, this.state);
    }
    componentDidUpdate() {
      D3render(this.anchor, this.props, this.state);
    }

    render() {
      const { x, y } = this.props;
      const Component = this.props.component || 'g';

      return <Component transform={`translate(${x || 0}, ${y || 0})`} ref={this.anchorRef} />;
    }
  };
}