import { Card } from "antd";
import Dinero from "dinero.js";
import { useTranslation } from "react-i18next";
import { Cell, Pie, PieChart, ResponsiveContainer, Sector } from "recharts";
import DashboardRefreshRequired from "../refresh-required.component";

export default function DashboardMonthlyLaborSales({ data, ...cardProps }) {
  const { t } = useTranslation();
  if (!data) return null;
  if (!data.monthly_sales) return <DashboardRefreshRequired {...cardProps} />;

  const laborData = {};

  data.monthly_sales.forEach((job) => {
    job.joblines.forEach((jobline) => {
      if (!jobline.mod_lbr_ty) return;
      if (!laborData[jobline.mod_lbr_ty]) laborData[jobline.mod_lbr_ty] = Dinero();
      laborData[jobline.mod_lbr_ty] = laborData[jobline.mod_lbr_ty].add(
        Dinero({
          amount: Math.round((job[`rate_${jobline.mod_lbr_ty.toLowerCase()}`] || 0) * 100)
        }).multiply(jobline.mod_lb_hrs || 0)
      );
    });
  });

  const chartData = Object.keys(laborData).map((key) => {
    return {
      name: t(`joblines.fields.lbr_types.${key.toUpperCase()}`),
      value: laborData[key].getAmount() / 100,
      color: pieColor(key.toUpperCase())
    };
  });

  return (
    <Card title={t("dashboard.titles.monthlylaborsales")} {...cardProps}>
      <div style={{ height: "100%" }}>
        <ResponsiveContainer width="100%" height="100%" minHeight={100}>
          <PieChart margin={0} padding={0}>
            <Pie
              data={chartData}
              shape={renderActiveShape}
              cx="50%"
              cy="50%"
              innerRadius="60%"
              //  outerRadius={80}
              fill="#8884d8"
              dataKey="value"
            >
              {chartData.map((entry, index) => (
                <Cell key={`cell-${index}`} fill={entry.color} />
              ))}
            </Pie>
          </PieChart>
        </ResponsiveContainer>
      </div>
    </Card>
  );
}

export const DashboardMonthlyRevenueGraphGql = `

`;

const pieColor = (type) => {
  if (type === "LAA") return "lightgreen";
  else if (type === "LAB") return "dodgerblue";
  else if (type === "LAD") return "aliceblue";
  else if (type === "LAE") return "seafoam";
  else if (type === "LAG") return "chartreuse";
  else if (type === "LAF") return "magenta";
  else if (type === "LAM") return "gold";
  else if (type === "LAR") return "crimson";
  else if (type === "LAU") return "slategray";
  else if (type === "LA1") return "slategray";
  else if (type === "LA2") return "slategray";
  else if (type === "LA3") return "slategray";
  else if (type === "LA4") return "slategray";
  return "slategray";
};

const renderActiveShape = (props) => {
  //const RADIAN = Math.PI / 180;
  const {
    cx,
    cy,
    //midAngle,
    innerRadius,
    outerRadius,
    startAngle,
    endAngle,
    fill,
    payload,
    //  percent,
    value,
    isActive
  } = props;
  // const sin = Math.sin(-RADIAN * midAngle);
  // const cos = Math.cos(-RADIAN * midAngle);
  // // const sx = cx + (outerRadius + 10) * cos;
  // const sy = cy + (outerRadius + 10) * sin;
  // const mx = cx + (outerRadius + 30) * cos;
  // const my = cy + (outerRadius + 30) * sin;
  // //const ex = mx + (cos >= 0 ? 1 : -1) * 22;
  // const ey = my;
  //const textAnchor = cos >= 0 ? "start" : "end";

  return (
    <g>
      {isActive && (
        <>
          <text x={cx} y={cy} dy={0} textAnchor="middle" fill={fill}>
            {payload.name}
          </text>
          <text x={cx} y={cy} dy={16} textAnchor="middle" fill={fill}>
            {Dinero({ amount: Math.round(value * 100) }).toFormat()}
          </text>
        </>
      )}
      <Sector
        cx={cx}
        cy={cy}
        innerRadius={innerRadius}
        outerRadius={outerRadius}
        startAngle={startAngle}
        endAngle={endAngle}
        fill={fill}
      />
      {isActive && (
        <Sector
          cx={cx}
          cy={cy}
          startAngle={startAngle}
          endAngle={endAngle}
          innerRadius={outerRadius + 6}
          outerRadius={outerRadius + 10}
          fill={fill}
        />
      )}
    </g>
  );
};
// <path
//   d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`}
//   stroke={fill}
//   fill="none"
// />;
// <text
//   x={ex + (cos >= 0 ? 1 : -1) * 12}
//   y={ey}
//   textAnchor={textAnchor}
//   fill="#333"
// >
//   {payload.name}
// </text>
// <text
//   x={ex + (cos >= 0 ? 1 : -1) * 12}
//   y={ey}
//   dy={18}
//   textAnchor={textAnchor}
//   fill="#999"
// >
//   {Dinero({ amount: Math.round(value * 100) }).toFormat()}
// </text>
