import { useEffect, useRef } from "react";
import { colormapTable, getColormap, type Range } from "@plate-dyn/core";

export function Colorbar({
  range,
  colormap,
  unit,
  scale = 1,
  height = 200,
}: {
  range: Range;
  colormap: string;
  unit?: string;
  scale?: number;
  height?: number;
}) {
  const ref = useRef<HTMLCanvasElement>(null);
  useEffect(() => {
    const c = ref.current;
    if (!c) return;
    const ctx = c.getContext("2d");
    if (!ctx) return;
    const table = colormapTable(getColormap(colormap));
    const h = 256;
    c.width = 1;
    c.height = h;
    const img = ctx.createImageData(1, h);
    for (let k = 0; k < h; k++) {
      const t = 255 - k;
      img.data[4 * k] = table[3 * t];
      img.data[4 * k + 1] = table[3 * t + 1];
      img.data[4 * k + 2] = table[3 * t + 2];
      img.data[4 * k + 3] = 255;
    }
    ctx.putImageData(img, 0, 0);
  }, [colormap]);
  return (
    <div className="pl-colorbar" style={{ height }}>
      <span>{fmt(range.max * scale)}</span>
      <canvas ref={ref} />
      <span>
        {fmt(range.min * scale)} {unit}
      </span>
    </div>
  );
}

export function fmt(x: number): string {
  if (x === 0) return "0";
  const a = Math.abs(x);
  if (a >= 1e4 || a < 1e-2) return x.toExponential(2);
  return x.toPrecision(3);
}