import React, { Component } from 'react';
    import { Arc, Group, Pie, Rect, Svg } from '@potion/element'
    import { max } from 'd3-array';
    import { scaleLinear } from 'd3-scale';
  
    export default class LG0 extends Component {
  
      static displayName = 'LG0';
      state = {};

      render() {
        const { nodes, width, height } = this.props;
        const smallerDimension = Math.min(width, height);
        const arcRadius = (smallerDimension / 2) * 0.25;
        const rectRadius = (smallerDimension / 2) * 0.75;
        const columnWidth = 100 / nodes.length;
        const heightScale = scaleLinear()
          .domain([0, max(nodes, node => node.secondaryValue)])
          .range([0, rectRadius]);

        return (
          <Svg height={height} width={width}>
            <Group transform={{ translate: [width / 2, height / 2] }}>
              <Pie
                data={nodes}
                value={datum => datum.value}
                id={datum => datum.id}
                sort={(a, b) => a.index - b.index}
                nodeEnter={d => ({ ...d, startAngle: d.endAngle })}
                animate
              >{nodes => nodes.map(({ startAngle, endAngle, data: { key, secondaryValue } }) => (
                <Group
                  key={key}
                  onMouseEnter={() => {
                    this.setState({ hoveredNode: key });
                  }}
                  onMouseOut={() => {
                    this.setState({ hoveredNode: null });
                  }}
                >
                  <Arc
                    innerRadius={0}
                    outerRadius={arcRadius}
                    startAngle={startAngle}
                    endAngle={endAngle}
                    fill={this.state.hoveredNode === key ? COLORS.PINK : COLORS.DARK_GREY}
                    stroke="white"
                    strokeWidth={1}
                  />
                  <Group
                    transform={{
                      rotate: [util.radiansToDegrees(startAngle + (endAngle - startAngle) / 2) - 180],
                    }}
                  >
                    <Rect
                      x={-10}
                      y={arcRadius}
                      width={columnWidth}
                      height={heightScale(secondaryValue || 0)}
                      fill={this.state.hoveredNode === key ? COLORS.PINK : COLORS.DARK_GREY}
                    />
                  </Group>
                </Group>
              ))}</Pie>
            </Group>
          </Svg>
        );
      }
    }