import type { GetThemesResponse } from "@yaakapp-internal/plugins";
import { invokeCmd } from "../tauri";
import type { Appearance } from "./appearance";
import { resolveAppearance } from "./appearance";

export async function getThemes() {
  const themes = (await invokeCmd<GetThemesResponse[]>("cmd_get_themes")).flatMap((t) => t.themes);
  themes.sort((a, b) => a.label.localeCompare(b.label));
  // Remove duplicates, in case multiple plugins provide the same theme
  const uniqueThemes = Array.from(new Map(themes.map((t) => [t.id, t])).values());
  return { themes: [yaakDark, yaakLight, ...uniqueThemes] };
}

export async function getResolvedTheme(
  preferredAppearance: Appearance,
  appearanceSetting: string,
  themeLight: string,
  themeDark: string,
) {
  const appearance = resolveAppearance(preferredAppearance, appearanceSetting);
  const { themes } = await getThemes();

  const darkThemes = themes.filter((t) => t.dark);
  const lightThemes = themes.filter((t) => !t.dark);

  const dark = darkThemes.find((t) => t.id === themeDark) ?? darkThemes[0] ?? yaakDark;
  const light = lightThemes.find((t) => t.id === themeLight) ?? lightThemes[0] ?? yaakLight;

  const active = appearance === "dark" ? dark : light;

  return { dark, light, active };
}

const yaakDark = {
  id: "yaak-dark",
  label: "Yaak",
  dark: true,
  base: {
    surface: "hsl(244,23%,14%)",
    surfaceHighlight: "hsl(244,23%,20%)",
    text: "hsl(245,23%,85%)",
    textSubtle: "hsl(245,18%,58%)",
    textSubtlest: "hsl(245,18%,45%)",
    border: "hsl(244,23%,25%)",
    primary: "hsl(266,100%,79%)",
    secondary: "hsl(245,23%,60%)",
    info: "hsl(206,100%,63%)",
    success: "hsl(150,99%,44%)",
    notice: "hsl(48,80%,63%)",
    warning: "hsl(28,100%,61%)",
    danger: "hsl(342,90%,68%)",
  },
  components: {
    button: {
      primary: "hsl(266,100%,71.1%)",
      secondary: "hsl(244,23%,54%)",
      info: "hsl(206,100%,56.7%)",
      success: "hsl(150,99%,37.4%)",
      notice: "hsl(48,80%,50.4%)",
      warning: "hsl(28,100%,54.9%)",
      danger: "hsl(342,90%,61.2%)",
    },
    dialog: {
      border: "hsl(244,23%,24%)",
    },
    sidebar: {
      surface: "hsl(243,23%,16%)",
      border: "hsl(244,23%,22%)",
    },
    responsePane: {
      surface: "hsl(243,23%,16%)",
      border: "hsl(246,23%,23%)",
    },
    appHeader: {
      surface: "hsl(244,23%,12%)",
      border: "hsl(244,23%,21%)",
    },
  },
};

const yaakLight = {
  id: "yaak-light",
  label: "Yaak",
  dark: false,
  base: {
    surface: "hsl(0,0%,100%)",
    surfaceHighlight: "hsl(218,24%,87%)",
    text: "hsl(217,24%,10%)",
    textSubtle: "hsl(217,24%,40%)",
    textSubtlest: "hsl(217,24%,58%)",
    border: "hsl(217,22%,90%)",
    primary: "hsl(266,100%,60%)",
    secondary: "hsl(220,24%,50%)",
    info: "hsl(206,100%,40%)",
    success: "hsl(139,66%,34%)",
    notice: "hsl(45,100%,34%)",
    warning: "hsl(30,100%,36%)",
    danger: "hsl(335,75%,48%)",
  },
  components: {
    sidebar: {
      surface: "hsl(220,20%,98%)",
      border: "hsl(217,22%,88%)",
      surfaceHighlight: "hsl(217,25%,90%)",
    },
  },
};

export const defaultDarkTheme = yaakDark;
export const defaultLightTheme = yaakLight;