import { Grid } from "@mui/material";
import Plot from "react-plotly.js";

export default function ScatterPlot({ words, x, y }) {
  const colors = [
    "red",
    "blue",
    "green",
    "orange",
    "purple",
    "brown",
    "pink",
    "grey",
    "yellow",
    "cyan",
  ];
  return (
    <>
      <Grid item xs={12}>
        <Plot
          data={words.map((word, index) => {
            const color = colors[index % colors.length];
            return {
              x: [word.embedding[x]],
              y: [word.embedding[y]],
              type: "scatter",
              mode: "markers",
              line: {
                width: 6,
              },
              marker: {
                size: 10,
                color: color,
              },
              name: word.item,
            };
          })}
          layout={{
            title: "Dimensional Plot",
            xaxis: { title: "Dimension " + x, range: [-1, 1] },
            yaxis: { title: "Dimension " + y, range: [-1, 1] },
            showlegend: true,
            autosize: true,
          }}
          useResizeHandler={true}
          style={{ width: "100%", height: "100%" }}
        />
      </Grid>
    </>
  );
}