import { useEffect, useState } from "react";
import { baseUrl } from "./api";

interface Prop {
  name: string;
  min: string;
  max: string;
  step: string;
  value: string;
}

interface Params {
  nodeSize: number;
  edgeWidth: number;
  arrowSize: number;
  fontSize: number;
  distance: number;
}

export default function Analysis() {
  const [image, setImage] = useState("");
  const [params, setParams] = useState<Params>({
    nodeSize: 2000,
    edgeWidth: 1,
    arrowSize: 20,
    fontSize: 10,
    distance: 2,
  });
  const [showControlPanel, setShowControlPanel] = useState(false);
  const [loading, setLoading] = useState(false);

  // Function to generate and fetch the graph image
  async function loadImage() {
    setLoading(true);
    await fetch(`${baseUrl}api/analysis/image`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(params)
    })
      .then((resp) => resp.json())
      .then((data) => {
        setImage(data.image);
        setLoading(false);
      });
  }
  useEffect(() => {
    loadImage();
  }, []);

  return (
    <div className="stack column dropdown">
      <button onClick={() => setShowControlPanel(!showControlPanel)}>
        Parameters <svg viewBox="0 0 24 24" height="1.2em" style={{ fill: "#ffffff", display: "inline", top: "0.2em", position: "relative", transform: showControlPanel ? "rotate(180deg)" : "unset" }} > <path d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z" > </path></svg >
      </button>
      <div id="control-panel" className={showControlPanel ? "opened" : ""}>

        <div className="control">
          <label>distance between nodes</label>
          <input
            type="range"
            min="0.01"
            max="3.001"
            step="0.05"
            value={params.distance}
            onChange={(evt) => setParams({ ...params, distance: Number(evt.target.value) })}
            onMouseUp={() => loadImage()}
          />
          <span>{params.distance}</span></div>

        <div className="control">
          <label>node size</label>
          <input
            type="range"
            min="500"
            max="3000"
            value={params.nodeSize}
            onChange={(evt) => setParams({ ...params, nodeSize: Number(evt.target.value) })}
            onMouseUp={() => loadImage()}
          />
          <span>{params.nodeSize}</span>
        </div>

        <div className="control">
          <label>font size</label>
          <input
            type="range"
            min="4"
            max="24"
            value={params.fontSize}
            onChange={(evt) => setParams({ ...params, fontSize: Number(evt.target.value) })}
            onMouseUp={() => loadImage()}
          />
          <span>{params.fontSize}</span>
        </div>

        <div className="control">
          <label>edge width</label>
          <input
            type="range"
            min="1"
            max="5"
            step="0.1"
            value={params.edgeWidth}
            onChange={(evt) => setParams({ ...params, edgeWidth: Number(evt.target.value) })}
            onMouseUp={() => loadImage()}
          />
          <span>{params.edgeWidth}</span>
        </div>

        <div className="control">
          <label>arrow size</label>
          <input
            type="range"
            min="10"
            max="50"
            value={params.arrowSize}
            onChange={(evt) => setParams({ ...params, arrowSize: Number(evt.target.value) })}
            onMouseUp={() => loadImage()}
          />
          <span>{params.arrowSize}</span>
        </div>

      </div>
      <button onClick={() => loadImage()}>reload ↻</button>
      {
        loading ? (
          <span className="loader"></span>
        ) : (
          <img src={"data:image/png;base64," + image} width="86%" />
        )
      }
    </div >
  );
}