import React, { Component } from 'react';
    import { Circle, Pack, Svg } from '@potion/element'
    import itsSet from 'its-set';
    import { hierarchy } from 'd3-hierarchy';
  
    export default class V extends Component {
  
      static displayName = 'V';
      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: COLORS.PINK,
                    stopOpacity: 1,
                  }}
                />
              </radialGradient>
            </defs>

            <Pack
              data={{ children: nodes }}
              sum={datum => Math.pow(Math.pow(datum.value, 1 / 3), 2)}
              size={[400, 400]}
              includeRoot={false}
              animate
              nodeEnter={d => ({ ...d, r: 0 })}
            >{nodes => nodes.map(({ x, y, r, key }) => (
              <Circle
                key={key}
                cx={x}
                cy={y}
                r={r}
                fill={this.state.hoveredNode === key ? 'url(#gradPink)' : 'url(#gradGrey)'}
                onMouseEnter={() => {
                  this.setState({ hoveredNode: key });
                }}
                onMouseOut={() => {
                  this.setState({ hoveredNode: null });
                }}
              />
            ))}</Pack>
          </Svg>
        );
      }
    }