import React from "react";
import { Pie } from "@vx/shape";
import { Group } from "@vx/group";
import { scaleOrdinal } from "@vx/scale";
import { LegendOrdinal } from "@vx/legend";
//import data from "./CategoryByDay.json";

const data = [
  {
    "Category": "Category Name 1",
    "Total": 643401
  },
  {
    "Category": "Category Name 2",
    "Total": 1062500
  },
  {
    "Category": "Category Name 3",
    "Total": 670000
  }
]

function Label({ x, y, children }) {
  return (
    <text fill="black" textAnchor="middle" x={x} y={y} dy=".33em" fontSize={14}>
      {children}
    </text>
  );
}

export default ({
  title,
  width,
  height,
  events = false,
  margin = {
    top: 30,
    left: 20,
    right: 20,
    bottom: 30,
  },
}) => {
  if (width < 10) return null;
  const radius = Math.min(width, height) / 2;

  const color = scaleOrdinal({
    domain: data.Category,
    range: [
      "#87cefa",
      "#d4ea62",
      "#d56464",
    ],
  });

  return (
    <div>
      <h4>{title}</h4>
      <svg width={width} height={height}>
        <Group top={radius} left={width / 2}>
          <Pie
            data={data}
            pieValue={d => d.Total}
            outerRadius={radius - radius / 10}
            innerRadius={radius - radius / 1.8}
            fill={function(d) {
              return color(d.index);
            }}
            cornerRadius={0}
            padAngle={0}
            centroid={(centroid, arc) => {
              const [x, y] = centroid;
              const { startAngle, endAngle } = arc;
              if (endAngle - startAngle < 0.1) return null;
              return (
                <Label fontSize={10} x={x} y={y}>
                  {arc.data.Category}
                </Label>
              );
            }}
          />
        </Group>
      </svg>
      <div
      style={{
        fontSize: '14px',
      }}
      >
      <LegendOrdinal
        scale={color}
        direction="column"
        labelMargin="0"
        labelFormat={label => `${label}`}

      />
      </div>
    </div>
  );
};