import { useWidgetStore } from "../../../store/useWidgetStore";
import PieGraphComponent from "../charts/PieGraphComponent";
import BarGraphComponent from "../charts/BarGraphComponent";
import LineGraphComponent from "../charts/LineGraphComponent";

export const DraggableWidget = ({ widget }: { widget: any }) => {
  const { selectedChartId, setSelectedChartId } = useWidgetStore();

  const handlePointerDown = () => {
    if (selectedChartId?.id !== widget.id) {
      setSelectedChartId(widget);
    }
  };

  return (
    <>
      <div
        key={widget.id}
        className={`chart-container ${
          selectedChartId?.id === widget.id && "activeChart"
        }`}
        onPointerDown={handlePointerDown}
      >
        {widget.type === "progress" ? (
          //   <ProgressCard title={widget.title} data={widget.data} />
          <></>
        ) : (
          <>
            {widget.type === "line" && (
              <LineGraphComponent
                type={widget.type}
                title={widget.title}
                fontSize={widget.fontSize}
                fontWeight={widget.fontWeight}
                data={{
                  measurements: [
                    { name: "testDevice", fields: "powerConsumption" },
                    { name: "furnace", fields: "powerConsumption" },
                  ],
                  interval: 1000,
                  duration: "1h",
                }}
              />
            )}
            {widget.type === "bar" && (
              <BarGraphComponent
                type={widget.type}
                title={widget.title}
                fontSize={widget.fontSize}
                fontWeight={widget.fontWeight}
                data={{
                  measurements: [
                    { name: "testDevice", fields: "powerConsumption" },
                    { name: "furnace", fields: "powerConsumption" },
                  ],
                  interval: 1000,
                  duration: "1h",
                }}
              />
            )}
            {widget.type === "pie" && (
              <PieGraphComponent
                type={widget.type}
                title={widget.title}
                fontSize={widget.fontSize}
                fontWeight={widget.fontWeight}
                data={{
                  measurements: [
                    { name: "testDevice", fields: "powerConsumption" },
                    { name: "furnace", fields: "powerConsumption" },
                  ],
                  interval: 1000,
                  duration: "1h",
                }}
              />
            )}
          </>
        )}
      </div>
    </>
  );
};