import React from "react";
import { Sunburst } from "@ant-design/plots";

const customLabel = (_, datum) => {
  return (
    <div
      style={{
        marginLeft:
          datum.name === "Total Active Jobs" ||
          datum.name === "Total Inactive jobs"
            ? "-25px"
            : "",
        width:
          datum.name === "Total Active Jobs" ||
          datum.name === "Total Inactive jobs"
            ? "40px"
            : "",
        fontSize: "12px",
      }}
    >
      {datum.name}
    </div>
  );
};

const SunburstChart = ({ jobCount }) => {
  const config = {
    data: {
      value: {
        name: "Jobs",
        children: [
          {
            name: "Total Active Jobs",
            value: jobCount?.activeJobs?.totalActiveJobs,
            value: jobCount?.activeJobs?.totalActiveJobs,
            children: [
              {
                name: "Existing Jobs",
                value: jobCount?.activeJobs?.existingJobs,
                name: "Existing Jobs",
                value: jobCount?.activeJobs?.existingJobs,
              },
              {
                name: "New Jobs",
                value: jobCount?.activeJobs?.newJobs,
                name: "New Jobs",
                value: jobCount?.activeJobs?.newJobs,
              },
            ],
          },
          {
            name: "Total Inactive jobs",
            value: jobCount?.inactiveJobs?.totalInactiveJobs,
            value: jobCount?.inactiveJobs?.totalInactiveJobs,
            children: [
              {
                name: "Closed Jobs",
                value: jobCount?.inactiveJobs?.closedJobs,
                name: "Closed Jobs",
                value: jobCount?.inactiveJobs?.closedJobs,
              },
              {
                name: "Cancelled Jobs",
                value: jobCount?.inactiveJobs?.cancelledJobs,
                name: "Cancelled Jobs",
                value: jobCount?.inactiveJobs?.cancelledJobs,
              },
            ],
          },
        ],
      },
    },
    animate: {
      enter: { type: "waveIn" },
    },
    innerRadius: 0.5,
    style: {
      fill: (v) => {
        if (v.path === "Total Active Jobs") return "#27BB2E";
        if (v.path === "Total Inactive jobs") return "#006CB7";
        if (v.path === "Total Active Jobs / Existing Jobs")
          return "rgba(39, 187, 46, 0.40)";
        if (v.path === "Total Active Jobs / New Jobs") return "#4AEC52";
        if (v.path === "Total Inactive jobs / Closed Jobs")
          return "rgba(0, 108, 183, 0.40)";
        if (v.path === "Total Inactive jobs / Cancelled Jobs") return "#3F95EA";
      },
    },
    // label: {
    //   text: 'name',
    //   // transform: [
    //   //   {
    //   //     type: 'overflowHide',
    //   //   },
    //   // ],
    //   // render: customLabel,
    // },
    state: {
      active: { zIndex: 2, stroke: "#fff" },
      inactive: { zIndex: 1, stroke: "#fff" },
    },
    interaction: {
      tooltip: {
        render: (e, { title, items }) => {
          const tooltipArr = title.split("/");
          if (tooltipArr.length <= 1) {
            return (
              <div
                style={{
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "space-between",
                  gap: "10px",
                }}
              >
                <div style={{ fontWeight: "700" }}>{title}</div>
                <div style={{ fontWeight: "700" }}>{items[0].value}</div>
              </div>
            );
          }
          return (
            <div>
              <div style={{ fontWeight: "700" }}>{tooltipArr[0]}</div>
              <div
                style={{
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "space-between",
                  gap: "10px",
                }}
              >
                <div>{tooltipArr[1]}</div>
                <div>{items[0].value}</div>
              </div>
            </div>
          );
        },
      },
      drillDown: {
        breadCrumb: {
          rootText: "Total Jobs",
          active: {
            fill: "#1976d2",
          },
        },
        fixedColor: false,
      },
    },
  };
  return <Sunburst className="sunburstChart" {...config} />;
};

export default SunburstChart;