import React from "react";
import { notRandomFromArray } from "@sortug/lib";
import "./sentence.css";
import type { AnalyzeRes, ColorTheme, LangToColor } from "../logic/types";
import type { POS_CODE } from "../thai/logic/thainlp";

export function ColoredText({
  frags,
  fn,
  lang,
  theme,
}: {
  frags: LangToColor<unknown>[];
  fn?: (s: any) => void;
  lang?: string;
  theme: ColorTheme;
}) {
  const colors = colorPalette[theme];
  console.log("coloredText", theme);

  // function getStyle(frags: AnalyzeRes[], i: number) {
  // const prev = frags[i - 1];
  // const prevC = prev ? notRandomFromArray(prev.word, colors) : "lol";
  // const color = notRandomFromArray(s, colors);
  // const opacity = prev && prevC === color ? 0.8 : 1;
  // const style = { color, opacity };
  // return style;
  // }

  return (
    <>
      {frags.map((s, i) => {
        // old code
        const prev = frags[i - 1];
        const prevC = prev ? notRandomFromArray(prev.colorBy, colors) : "lol";
        const color = notRandomFromArray(s.colorBy, colors);
        const style = !prev ? { color } : { color };
        return (
          <CTInner
            lang={lang}
            key={s.display + i}
            s={s}
            style={style}
            fn={fn}
          />
        );
      })}
    </>
  );
}

export function CTInner({
  s,
  style,
  fn,
  lang,
}: {
  s: LangToColor<unknown>;
  style: any;
  fn?: (s: any) => void;
  lang?: string;
}) {
  function handleClick(e: React.MouseEvent<HTMLSpanElement>) {
    if (fn) {
      e.stopPropagation();
      fn(s.data);
    }
  }
  return (
    <span lang={lang} onClick={handleClick} className="word cp" style={style}>
      {s.display}
    </span>
  );
}

export const colorPalette: Record<ColorTheme, string[]> = {
  light: [
    // Black	Standard high contrast
    "#000000",
    // 	Charcoal	Softer than pure black
    "#36454F",
    // 	Slate Grey	Cool, dark grey-green
    "#2F4F4F",
    // 	Navy Blue	Classic professional blue
    "#000080",
    // 	Midnight Blue	Very deep, rich blue
    "#191970",
    // 	Cobalt	Vivid, highly legible blue
    "#0047AB",
    // 	Teal	Distinct blue-green
    "#008080",
    // 	Forest Green	Nature-inspired dark green
    "#006400",
    // 	Pine Green	Cooler, bluish green
    "#01796F",
    // 	Olive Drab	Dark brownish-green
    "#4B5320",
    // 	Bronze	Metallic brown-orange
    "#CD7F32",
    // 	Saddle Brown	Robust earthy tone
    "#8B4513",
    // 	Chocolate	Warm, readable orange-brown
    "#D2691E",
    // 	Burnt Sienna	Reddish-orange earth tone
    "#E97451",
    // 	Firebrick	Muted dark red
    "#B22222",
    // 	Crimson	Vivid, alarming red
    "#DC143C",
    // 	Maroon	Deep, serious red
    "#800000",
    // 	Burgundy	Purple-leaning red
    "#800020",
    // 	Deep Pink	High contrast magenta-pink
    "#C71585",
    // 	Dark Violet	Vivid purple
    "#9400D3",
    // 	Indigo	Deep blue-purple
    "#4B0082",
    // 	Purple	Standard distinct purple
    "#800080",
    // 	Rebecca Purple	Web-standard bluish purple
    "#663399",
    // 	Dim Gray	Neutral, medium-dark gray
    "#696969",
  ],
  dark: [
    // White	Standard high contrast
    "#FFFFFF",
    // 	Silver	Soft readable grey
    "#C0C0C0",
    // 	Cream	Warm white, easier on eyes
    "#FFFDD0",
    // 	Cyan	The standard terminal blue-green
    "#00FFFF",
    // 	Sky Blue	Pleasant, airy blue
    "#87CEEB",
    // 	Powder Blue	Very pale, soft blue
    "#B0E0E6",
    // 	Aquamarine	Bright neon blue-green
    "#7FFFD4",
    // 	Mint Green	Soft, pastel green
    "#98FB98",
    // Lime	Classic high-vis terminal green
    "#00FF00",
    // 	Chartreuse	Yellow-green neon
    "#7FFF00",
    // 	Gold	Bright yellow-orange
    "#FFD700",
    // 	Yellow	Standard high-vis yellow
    "#FFFF00",
    // 	Khaki	Muted, sandy yellow
    "#F0E68C",
    // Wheat	Soft beige/earth tone
    "#F5DEB3",
    // 	Orange	Standard distinctive orange
    "#FFA500",
    // 	Coral	Pinkish-orange
    "#FF7F50",
    // 	Salmon	Soft reddish-pink
    "#FA8072",
    // Hot Pink	Vivid, high-energy pink
    "#FF69B4",
    // 	Magenta	Pure, digital pink-purple
    "#FF00FF",
    // 	Plum	Muted, readable purple
    "#DDA0DD",
    // 	Violet	Bright, distinct purple
    "#EE82EE",
    // Lavender	Very light purple-blue
    "#E6E6FA",
    // 	Periwinkle	Soft indigo-blue
    "#CCCCFF",
    // 	Thistle	Desaturated light purple
    "#D8BFD8",
  ],
};

// export const colors = [
//   "#8c2c2c",
//   "#000000",
//   "#ffd400",
//   "#1513a0",
//   "#7e7e7e",
//   "1eb52d",
// ];