/* eslint-disable @typescript-eslint/no-explicit-any */
import { LegendOrdinal, LegendItem, LegendLabel } from "@visx/legend";
import { scaleOrdinal } from "@visx/scale";
import { ReactElement } from "react";
type LegendProps = {
  colorRange: string[];
  dataKeyArray: string[];
};
export const Legend = ({
  colorRange,
  dataKeyArray,
}: LegendProps): ReactElement => {
  const legendGlyphSize = 15;
  const ordinalColorScale = scaleOrdinal({
    domain: dataKeyArray,
    range: colorRange,
  });
  return (
    <div
      className="legend"
      style={{ padding: "2px", paddingLeft: "5px", fontSize: "10px" }}
    >
      <LegendOrdinal
        scale={ordinalColorScale}
        labelFormat={(label: any) => `${label.toUpperCase()}`}
      >
        {(labels: any) => (
          <div
            style={{
              display: "flex",
              flexDirection: "row",
            }}
          >
            {labels.map((label: any, i: number) => (
              <LegendItem key={`legend-quantile-${i}`} margin="0 4px">
                <svg width={legendGlyphSize} height={legendGlyphSize}>
                  <rect
                    fill={label.value}
                    width={legendGlyphSize}
                    height={legendGlyphSize}
                  />
                </svg>
                <LegendLabel
                  style={{ color: "black", margin: "2px 0 0 4px" }}
                  align={`${"left"}`}
                >
                  {label.text}
                </LegendLabel>
              </LegendItem>
            ))}
          </div>
        )}
      </LegendOrdinal>
    </div>
  );
};
export default Legend;