import { type } from "@testing-library/user-event/dist/type";
import { name } from "plotly.js/lib/bar";
import React from "react";
import Plot from "react-plotly.js";

const colors = [
  'red', 'blue', 'green', 'orange', 'purple', 'brown', 'pink', 'grey', 'yellow', 'cyan'
];

export default function EmbeddingPlot({ words }) {
  return (
    <Plot
      data={[
        ...words.map((word, index) => {
          const color = colors[index % colors.length];
          return {
            x: [0, word.embedding[0]],
            y: [0, word.embedding[1]],
            z: [0, word.embedding[2]],
            type: "scatter3d",
            mode: "lines+markers",
            line: {
              width: 6,
            },
            marker: {
              size: 1,
              color: color, 
            },
            name: word.item,
          };
        }),
        ...words.map((word, index) => {
          const color = colors[index % colors.length];
          return {
            type: "cone",
            x: [word.embedding[0]],
            y: [word.embedding[1]],
            z: [word.embedding[2]],
            u: [word.embedding[0]],
            v: [word.embedding[1]],
            w: [word.embedding[2]],
            sizemode: "absolute",
            sizeref: 0.05,
            showscale: false,
            colorscale: [[0, color], [1, color]],
          };
        }),
      ]}
      layout={{
        width: 800,
        height: 600,
        title: "3D Plot of Vectors",
        scene: {
          xaxis: { title: "X Axis" },
          yaxis: { title: "Y Axis" },
          zaxis: { title: "Z Axis" },
        },
        autosize: true,
      }}
    />
  );
}