import React from "react";
import { useWidgetStore } from "../../../../../store/useWidgetStore";
import { ChartType } from "chart.js/auto";
import ChartComponent from "./ChartComponent";
import { StockIncreseIcon } from "../../../../icons/RealTimeVisulationIcons";

const chartTypes: ChartType[] = [
  "bar",
  "line",
  "pie",
  "doughnut",
  "polarArea",
];

const sampleData = {
  labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
  datasets: [
    {
      data: [65, 59, 80, 81, 56, 55, 40],
      backgroundColor: "#6f42c1",
      borderColor: "#ffffff",
      borderWidth: 1,
    },
  ],
};

interface WidgetProps {
  type: ChartType;
  index: number;
  title: string;
}

const ChartWidget: React.FC<WidgetProps> = ({ type, index, title }) => {
  const { setDraggedAsset } = useWidgetStore((state) => state);

  return (
    <div
      className={`chart chart-${index + 1}`}
      draggable
      onDragStart={() => {
        setDraggedAsset({
          type,
          id: `widget-${index + 1}`,
          title,
          panel: "top",
          data: sampleData,
        });
      }}
      onDragEnd={() => setDraggedAsset(null)}
    >
      <ChartComponent type={type} title={title} data={sampleData} />
    </div>
  );
};

const ProgressBarWidget = ({
  id,
  title,
  data,
}: {
  id: string;
  title: string;
  data: any;
}) => {
  const { setDraggedAsset } = useWidgetStore((state) => state);

  return (
    <div
      className="chart progressBar"
      draggable
      onDragStart={() => {
        setDraggedAsset({
          type: "progress",
          id,
          title,
          panel: "top",
          data,
        });
      }}
      onDragEnd={() => setDraggedAsset(null)}
    >
      <div className="header">{title}</div>
      {data.stocks.map((stock: any, index: number) => (
        <div className="stock" key={index}>
          <span className="stock-item">
            <span className="stockValues">
              <div className="key">{stock.key}</div>
              <div className="value">{stock.value}</div>
            </span>
            <div className="stock-description">{stock.description}</div>
          </span>
          <div className="icon">
            <StockIncreseIcon />
          </div>
        </div>
      ))}
    </div>
  );
};

const Widgets2D = () => {
  return (
    <div className="widget2D">
      <div className="chart-container">
        {chartTypes.map((type, index) => {
          const widgetTitle = `Widget ${index + 1}`;
          return (
            <ChartWidget
              key={index}
              type={type}
              index={index}
              title={widgetTitle}
            />
          );
        })}
        <ProgressBarWidget
          id="widget-7"
          title="Widget 7"
          data={{
            stocks: [
              { key: "units", value: 1000, description: "Initial stock" },
            ],
          }}
        />
        <ProgressBarWidget
          id="widget-8"
          title="Widget 8"
          data={{
            stocks: [
              { key: "units", value: 1000, description: "Initial stock" },
              { key: "units", value: 500, description: "Additional stock" },
            ],
          }}
        />
      </div>
    </div>
  );
};

export default Widgets2D;