import React, { Component } from 'react';
    import { Circle, Pack, Svg } from 'number-picture'
    import itsSet from 'its-set';
    import { hierarchy } from 'd3-hierarchy';
  
    export default class V extends Component {
  
      constructor() {
        super();
        this.displayName = 'V';
        this.state = {};
      }
  
      render() {
        const { nodes, width, height } = this.props;
  
        return (
          <Svg height={height} width={width}>
  
            <defs>
              <radialGradient id='gradGrey' cx='50%' cy='50%' r='50%' fx='50%' fy='50%'>
                <stop
                  offset='0%'
                  style={{
                    stopColor: 'rgb(100, 100, 100)',
                    stopOpacity: 1,
                  }}
                />
                <stop
                  offset='100%'
                  style={{
                    stopColor: 'rgb(0, 0, 0)',
                    stopOpacity: 1,
                  }}
                />
              </radialGradient>
  
              <radialGradient id='gradPink' cx='50%' cy='50%' r='50%' fx='50%' fy='50%'>
                <stop
                  offset='0%'
                  style={{
                    stopColor: 'rgb(255, 255, 255)',
                    stopOpacity: 1,
                  }}
                />
                <stop
                  offset='100%'
                  style={{
                    stopColor: '#ff3a55',
                    stopOpacity: 1,
                  }}
                />
              </radialGradient>
            </defs>
  
            <Pack
              data={
                hierarchy({ children: nodes })
                  .sum(datum => Math.pow(Math.pow(datum.value, 1 / 3), 2))
              }
              size={[400, 400]}
              includeRoot={false}
            >
              <Circle
                enterDuration={3000}
                enterEase='easeLinear'
                enterDatum={ownProps => ({
                  x: ownProps.datum.x,
                  y: ownProps.datum.y,
                  r: 0,
                })}
                updateDuration={3000}
                updateEase='easeLinear'
                exitDuration={3000}
                exitEase='easeLinear'
                exitDatum={() => ({ r: 0, opacity: 0 })}
  
                cx={ownProps => ownProps.datum.x}
                cy={ownProps => ownProps.datum.y}
                r={ownProps => ownProps.datum.r}
                style={ownProps => ({
                  opacity: itsSet(ownProps.datum.opacity) ? ownProps.datum.opacity : 1,
                })}
  
                fill={({ index }) =>
                  this.state.hoveredNodeIndex === index ? 'url(#gradPink)' : 'url(#gradGrey)'
                }
                onMouseEnter={({ index }) => {
                  this.setState({ hoveredNodeIndex: index });
                }}
                onMouseOut={() => {
                  this.setState({ hoveredNodeIndex: null });
                }}
              />
            </Pack>
          </Svg>
        );
      }
    }