"use client";

import React from "react";
import styles from "./ColorChanger.module.css";
import Image from "next/image";

type ColorScheme = {
  name: string;

  bg: string;
  bgDark: string;
  bgDarker?: string;

  fg: string;
  fgDark: string;
  fgDarker?: string;

  error?: string;
  warning?: string;
};

const colors: ColorScheme[] = [
  {
    name: "Monokai Pro",
    bg: "#2d2a2e",
    bgDark: "#403e41",
    bgDarker: "#221f22",
    fg: "#fcfcfa",
    fgDark: "#727072",
    fgDarker: "#5b595c",
    error: "#ff6188",
    warning: "#ffd866"
  },
  {
    name: "Gruvbox Dark",
    bg: "#282828",
    bgDark: "#3c3836",
    fg: "#ebdbb2",
    fgDark: "#a89984"
  },
  {
    name: "Amora",
    bg: "#1a1a1a",
    bgDark: "#171717",
    fg: "#DEDBEB",
    fgDark: "#5c5c5c"
  },
  {
    name: "Amora Focus",
    bg: "#302838",
    bgDark: "#2a2331",
    fg: "#dedbeb",
    fgDark: "#5c5c5c"
  },
  {
    name: "Rosé Pine",
    bg: "#191724",
    bgDark: "#26233a",
    fg: "#e0def4",
    fgDark: "#908caa"
  },
  {
    name: "Rosé Pine Moon",
    bg: "#232136",
    bgDark: "#393552",
    fg: "#e0def4",
    fgDark: "#908caa"
  },
  {
    name: "Nord",
    bg: "#2e3440",
    bgDark: "#3b4252",
    fg: "#eceff4",
    fgDark: "#d8dee9"
  },
  {
    name: "lovelace",
    bg: "#1d1f28",
    bgDark: "#282a36",
    fg: "#fdfdfd",
    fgDark: "#414458"
  },
  {
    name: "skyfall",
    bg: "#282f37",
    bgDark: "#20262c",
    fg: "#f1fcf9",
    fgDark: "#465463"
  },
  {
    name: "Catppuccin Frappe",
    bg: "#303446",
    bgDark: "#51576d",
    fg: "#c6d0f5",
    fgDark: "#a5adce"
  },
  {
    name: "Catppuccin Macchiato",
    bg: "#24273a",
    bgDark: "#494d64",
    fg: "#cad3f5",
    fgDark: "#a5adcb"
  },
  {
    name: "Catppuccin Mocha",
    bg: "#1e1e2e",
    bgDark: "#45475a",
    fg: "#cdd6f4",
    fgDark: "#a6adc8"
  }
];

const fallback = colors[0];

export default function ColorChanger() {
  const [current, setCurrent] = React.useState<string>("Monokai Pro");

  return (
    <Image
      src="/paint.svg"
      width="64"
      height="64"
      alt="paint"
      title={current}
      onClick={() => {
        const pool = colors.filter((x) => x.name !== current);
        const idx = Math.floor(Math.random() * pool.length);
        const colorScheme = pool[idx];

        const fixedColors = {
          "--bg": colorScheme.bg,
          "--bg-dark": colorScheme.bgDark,
          "--fg": colorScheme.fg,
          "--fg-dark": colorScheme.fgDark,
          "--error": colorScheme.error ?? fallback.error!,
          "--warning": colorScheme.warning ?? fallback.warning!
        };

        for (const [k, v] of Object.entries(fixedColors)) {
          document.documentElement.style.setProperty(k, v);
        }

        setCurrent(colorScheme.name);
      }}
      className={styles["color-changer"]}
    />
  );
}