import React from "react";
import { notRandomFromArray } from "sortug";
import "./sentence.css";

export function ColoredText({
  frags,
  fn,
  lang,
}: {
  frags: string[];
  fn?: (s: string) => void;
  lang?: string;
}) {
  return (
    <>
      {frags.map((s, i) => {
        const prev = frags[i - 1];
        const prevC = prev ? notRandomFromArray(prev, colors) : "lol";
        const color = notRandomFromArray(s, colors);
        const opacity = prev && prevC === color ? 0.8 : 1;
        const style = { color, opacity };
        console.log({ style });
        return <CTInner lang={lang} key={s + i} s={s} style={style} fn={fn} />;
      })}
    </>
  );
}

export function CTInner({
  s,
  style,
  fn,
  lang,
}: {
  s: string;
  style: any;
  fn?: (s: string) => void;
  lang?: string;
}) {
  function handleClick(e: React.MouseEvent<HTMLSpanElement>) {
    console.log(!!fn, "fn");
    if (fn) fn(e.currentTarget.innerText.trim());
  }
  return (
    <span lang={lang} onClick={handleClick} className="word cp" style={style}>
      {s}
    </span>
  );
}
export const colors = [
  "#8c2c2c",
  "#000000",
  "#ffd400",
  "#1513a0",
  "#7e7e7e",
  "1eb52d",
];