import { Cell, Pie, PieChart, ResponsiveContainer } from 'recharts';

type TooltipPayload = ReadonlyArray<any>;

type Coordinate = {
  x: number;
  y: number;
};

type PieSectorData = {
  percent?: number;
  name?: string | number;
  midAngle?: number;
  middleRadius?: number;
  tooltipPosition?: Coordinate;
  value?: number;
  paddingAngle?: number;
  dataKey?: string;
  payload?: any;
  tooltipPayload?: ReadonlyArray<TooltipPayload>;
};

type GeometrySector = {
  cx: number;
  cy: number;
  innerRadius: number;
  outerRadius: number;
  startAngle: number;
  endAngle: number;
};

type PieLabelProps = PieSectorData &
  GeometrySector & {
    tooltipPayload?: any;
  };


const RADIAN = Math.PI / 180;
const COLORS = ['#32CD32', '#E0E0E0'];

const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, value }: PieLabelProps) => {
  const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
  const x = cx + (radius - 25) * Math.cos(-(midAngle ?? 0) * RADIAN);
  const y = cy + radius * Math.sin(-(midAngle ?? 0) * RADIAN);

  return (
    <text x={x} y={y} fill="#04153E" textAnchor={x > cx ? 'start' : 'end'} dominantBaseline="central">
      {`$${value}`}
    </text>
  );
};

interface DashboardPieChartProps {
    paid: number;
    remaining: number;
}

const DashboardPieChart: React.FC<DashboardPieChartProps> = ({paid, remaining}) => {
  const data = [
    { name: 'Deductable Paid', value: paid },
    { name: 'Deductable Remaining', value: remaining },
  ];
  return (
    <div className="w-full h-full">
      <PieChart width={250} height={140} title="Deductable Progress">
        <Pie
          data={data}
          startAngle={180}
          endAngle={0}
          cx="50%"
          cy="100%"
          labelLine={false}
          label={renderCustomizedLabel}
          outerRadius={120}
          fill="#2A4B6F"
          dataKey="value"
          stroke="#04153E"
          strokeWidth={2}
        >
          {data.map((entry, index) => (
            <Cell key={`cell-${entry.name}`} fill={COLORS[index % COLORS.length]} />
          ))}
        </Pie>
      </PieChart>
    </div>
  );
};

export default DashboardPieChart;