import { create } from "@storybook/theming";
import { tokens } from "../src/cunningham-tokens";

const buildTheme = (
  colors: typeof tokens.themes.default.contextuals & any,
  type: "default" | "dark" = "default"
) => {
  return {
    brandUrl: "https://github.com/suitenumerique/cunningham",
    brandImage: "logo-cunningham.svg",
    brandTitle: "Cunningham",
    brandTarget: "_self",

    //
    colorPrimary: colors.content.semantic.brand.primary, // content.brand.primary
    colorSecondary: colors.content.semantic.brand.secondary, // content.brand.secondary

    // UI
    appBg: colors.background.surface.secondary, // background.surface.tertiary
    appContentBg: colors.background.surface.tertiary, // background.surface.primary
    appBorderColor: colors.border.surface.primary, // border.surface.primary
    appBorderRadius: 4,

    // Text colors
    textColor: colors.content.semantic.neutral.primary, // content.neutral.primary
    textInverseColor: colors.content.semantic.neutral.secondary, // content.neutral.secondary

    // Toolbar default and active colors
    barTextColor: colors.content.semantic.neutral.tertiary, // content.neutral.tertiary
    barSelectedColor: colors.content.semantic.neutral.primary, // content.neutral.primary
    barBg: colors.background.surface.primary, // background.surface.primary

    // Form colors
    inputBg: colors.background.surface.primary, // background.surface.primary
    inputBorder: colors.border.semantic.neutral.secondary, // border.neutral.secondary
    inputTextColor: colors.content.semantic.neutral.primary, // content.neutral.primary
    inputBorderRadius: 2,

    // Code preview colors
    codeBg: colors.background.surface.secondary, // background.surface.secondary
    codeColor: colors.content.semantic.neutral.primary, // content.neutral.primary
  };
};

export const themes = {
  default: create({
    base: "light",
    ...buildTheme(tokens.themes.default.contextuals),
  }),
  dark: create({
    base: "dark",
    ...buildTheme(tokens.themes.dark.contextuals, "dark"),
  }),
};

export enum Themes {
  dark = "dark",
  default = "default",
}

export const BACKGROUND_COLOR_TO_THEME = {
  "#181B24": Themes.dark,
};

export const getThemeFromGlobals = (globals: any): string => {
  const color = BACKGROUND_COLOR_TO_THEME[globals.backgrounds?.value];
  return color ?? Themes.default;
};