import Chart from 'chart.js/auto';
import {
  useRef,
  useEffect,
  useState,
} from 'react';
import './Chart.scss';
interface Props {
  chartData: {
    datasets: {
      data: number[];
      count: number[];
      backgroundColor: string[];
      userLegendMailArray: string[];
    }[];
    labels: string[];
  };
  chartSize: string;
  legend: boolean;
  legendHeight: string;
  legendTitle: string;
  legendSubtitle: string;
  legendTitleColor: string;
  legendSubTitleValue: number;
  centerText: boolean;
  legeContainerWidth: string;
  isLegendUser: boolean;
}

const PieChart =
  (
    {
      chartData,
      legend,
      chartSize,
      legendHeight,
      legendTitle,
      legendSubtitle,
      legendTitleColor,
      legendSubTitleValue,
      centerText,
      legeContainerWidth,
      isLegendUser,
    }: Props,
  ) => {
    const chartRef = useRef<any | null>(null);
    const pdfRef = useRef<any | null>();
    const legendContainerRef = useRef<HTMLDivElement | null>(null);
    const currentCenterText = useRef<boolean | null>(null);
    const maxLength = 12;
    const [tooltipPosition, setTooltipPosition] = useState({ y: 0 });
    const [showTooltip, setShowTooltip] = useState(true);
    const pieChartTextPlugin = () => {
      const _active = chartRef.current._active;
      if (chartRef.current) {
        const ctx = chartRef.current.ctx;
        ctx.save();
        ctx.font = '30px Arial';

        if (ctx && _active && _active.length) {
          const index = _active[0]?.index;
          const value = chartRef.current.data.datasets[0].count[index];
          const datasets = chartRef.current.data.datasets[0];
          const textColors =
            datasets.backgroundColor[index % datasets.backgroundColor.length];
          const labels = chartRef.current.data.labels;
          const label =
            labels[index].length > maxLength
              ? labels[index].substring(0, maxLength) + '...'
              : labels[index];

          ctx.fillStyle = textColors;
          ctx.font = 'bold 45px Arial';
          ctx.textAlign = 'center';
          ctx.textBaseline = 'middle';
          ctx.fillText(
            `${value}%`,
            chartRef?.current?.width / 2 + 15,
            chartRef?.current?.height / 2 - 15
          );
          ctx.font = ' 20px Arial';
          ctx.fillText(
            `${label}`,
            chartRef.current.width / 2 + 15,
            chartRef.current.height / 2 + 20
          );
        }

        ctx.restore();
      }
    };
    const zeroCount = chartData.datasets[0].data.every(
      (element) => element === 0
    );
    const canvasCallback = (canvas: HTMLCanvasElement | null) => {
      if (!canvas) return;

      const ctx = canvas.getContext('2d');

      if (!chartRef.current) {
        if (ctx) {
          chartRef.current = new Chart(ctx, {
            type: 'doughnut',
            data: chartData,
            options: {
              maintainAspectRatio: true,
              responsive: true,
              plugins: {
                legend: {
                  display: false,
                },
                tooltip: {
                  enabled: false,
                },
              },
              layout: {
                padding: {
                  left: 30,
                  right: 0,
                  top: 0,
                  bottom: 0,
                },
              },
            },
            plugins: [
              {
                id: 'pieChartText',
                afterDatasetDraw: pieChartTextPlugin,
              },
            ],
          });
        }
      }
    };

    useEffect(() => {
      if (chartRef.current) {
        if (zeroCount) {
          chartRef.current.data = {
            datasets: [
              {
                data: [100],
                count: [0],
                backgroundColor: ['#E0E0E0'],
              },
            ],
            labels: [''],
          };
        } else {
          chartRef.current.data = chartData;
        }
        chartRef.current.update();
      }

      currentCenterText.current = centerText;
      if (chartRef.current.options.plugins.pieChartText) {
        chartRef.current.options.plugins.pieChartText.enabled = centerText;
      }
      chartRef.current.update();
    }, [chartData, centerText, zeroCount]);

    const renderLegend = () => {
      const datasets = chartData?.datasets[0];
      const labels = chartData?.labels;
      const count = datasets?.count;
      const handleLegendItemHover = (
        e: React.MouseEvent,
        index: number,
        isHovered: boolean
      ) => {
        if (isHovered) {
          const legendItem = e.target as HTMLElement;
          const legendItemRow = legendItem.getBoundingClientRect();
          const legendContainerRect =
            legendContainerRef.current?.getBoundingClientRect();
          if (legendItemRow && legendContainerRect) {
            const legendPosition = {
              y: legendContainerRect.bottom - legendItemRow.bottom,
            };
            setTooltipPosition(legendPosition);
          }
        } else {
          setTooltipPosition({ y: 0 });
        }
        if (chartRef.current) {
          const ctx = chartRef.current.ctx;
          if (ctx) {
            if (isHovered && centerText === true) {
              const value = datasets.count[index];
              const label =
                labels[index].length > maxLength
                  ? labels[index].substring(0, maxLength) + '...'
                  : labels[index];
              const textColor =
                datasets.backgroundColor[
                  index % datasets.backgroundColor.length
                ];
              ctx.fillStyle = textColor;
              ctx.font = 'bold 45px Arial';
              ctx.textAlign = 'center';
              ctx.textBaseline = 'middle';
              ctx.fillText(
                `${value}%`,
                chartRef.current.width / 2 + 15,
                chartRef.current.height / 2 - 15
              );
              ctx.font = '20px Arial';
              ctx.fillText(
                `${label}`,
                chartRef.current.width / 2 + 15,
                chartRef.current.height / 2 + 20
              );
            } else {
              const centerX = chartRef.current.width / 2 + 15;
              const centerY = chartRef.current.height / 2;
              const innerRadius = 90;
              ctx.fillStyle = '#FFFFFF';
              ctx.beginPath();
              ctx.arc(centerX, centerY, innerRadius, 0, 2 * Math.PI);
              ctx.closePath();
              ctx.fill();
            }
          }
        }
      };

      const handleScroll = () => {
        setShowTooltip(false);
        setTimeout(() => {
          setShowTooltip(true);
        }, 100);
      };
      return (
        <div
          ref={legendContainerRef}
          onScroll={handleScroll}
          id="ff-chart-lagend"
          className={`legend-container collarge`}
          style={{ height: legendHeight }}
        >
          {datasets?.data?.map((value, index) => (
            <div
              key={index}
              className="legend-item"
              onMouseEnter={(e) => handleLegendItemHover(e, index, true)}
              onMouseLeave={(e) => handleLegendItemHover(e, index, false)}
            >
              <span
                className="legend-color"
                style={{
                  backgroundColor:
                    datasets.backgroundColor[
                      index % datasets.backgroundColor.length
                    ],
                }}
              ></span>
              <span className="legend-value">
                {' '}
                <span className="legendLabelName">
                  {labels[index]?.length > maxLength
                    ? labels[index].substring(0, maxLength) + '...'
                    : labels[index]}
                </span>
              </span>
              <span className="legend-value label-percent">
                {count[index]}%
              </span>
              <span className="legend-value legends-data"> {value}</span>
              {showTooltip && labels[index]?.length > maxLength && (
                <div
                  className="tooltip-msg"
                  style={{
                    position: 'absolute',
                    left: 10,
                    bottom: tooltipPosition.y + 10,
                  }}
                >
                  <div className="tooltipLabel">
                    {' '}
                    {labels[index].length > 200
                      ? labels[index].substring(0, 200) + '...'
                      : labels[index]}
                  </div>
                  {isLegendUser && (
                    <div className="tooltipEmail">
                      {chartData?.datasets[0]?.userLegendMailArray[index]}
                    </div>
                  )}
                </div>
              )}
            </div>
          ))}
        </div>
      );
    };

    // useImperativeHandle(ref, () => ({
    //   downloadAsPDF,
    // }));
    // const downloadAsPDF = () => {
    //   const legendElement = document.getElementById(
    //     'ff-chart-lagend'
    //   ) as HTMLElement | null;
    //   if (!legendElement) {
    //     return;
    //   }

    //   const originalLegendHeight = legendElement.style.height;
    //   legendElement.style.height = 'auto';
    //   const contentHeight = legendElement.scrollHeight + 100;
    //   legendElement.style.height = `${contentHeight}px`;

    //   const input = pdfRef.current;

    //   html2canvas(input, {
    //     height: contentHeight,
    //     windowHeight: contentHeight,
    //   }).then((canvas) => {
    //     const imgData = canvas.toDataURL('image/png');
    //     const imgWidth = canvas.width;
    //     const imgHeight = canvas.height;

    //     const pdf = new jsPDF({
    //       orientation: 'landscape',
    //       unit: 'px',
    //       format: [imgWidth, imgHeight],
    //     });

    //     const pageHeight = pdf.internal.pageSize.height;
    //     let remainingHeight = imgHeight;
    //     let currentPosition = 0;

    //     while (remainingHeight > 0) {
    //       pdf.addImage(imgData, 'PNG', 0, currentPosition, imgWidth, imgHeight);
    //       currentPosition -= pageHeight;
    //       remainingHeight -= pageHeight;

    //       if (remainingHeight > 0) {
    //         pdf.addPage([imgWidth, imgHeight]);
    //       }
    //     }

    //     setTimeout(() => {
    //       pdf.save('chart.pdf');
    //       legendElement.style.height = originalLegendHeight;
    //     }, 200);
    //   });
    // };

    return (
      <div className="chartBox">
        <div className="legend-allignement" ref={pdfRef}>
          <div>
            <canvas
              style={{ width: chartSize, height: chartSize }}
              ref={canvasCallback}
            ></canvas>
          </div>
          {legend === true && (
            <div
              className="legend-container-wrapper"
              style={{ width: legeContainerWidth }}
            >
              <div className="legend-title" style={{ color: legendTitleColor }}>
                {legendTitle}
              </div>
              <div className="title-container legend-subTitle">
                <span className="fontPoppinsRegularSm"> {legendSubtitle}:</span>
                {''}
                <span className="fontPoppinsSemiboldSm legendSubTitleValue">
                  {legendSubTitleValue}
                </span>
              </div>
              <div>
                <hr className="legend-line"></hr>
                <span>{renderLegend()}</span>
                {chartData?.labels?.length >= 6 && (
                  <hr className="legend-line pt-2"></hr>
                )}
              </div>
            </div>
          )}
        </div>
      </div>
    );
  }

export default PieChart;