import { ColorKeys, Colors } from "../types";

export const COLORS = [
  "blue",
  "orange",
  "yellow",
  "red",
  "purple",
  "amber",
  "lime",
  "green",
  "emerald",
  "teal",
  "cyan",
  "sky",
  "indigo",
  "violet",
  "purple",
  "fuchsia",
  "pink",
  "rose",
] as const;

export const DEFAULT_COLOR: ColorKeys = "blue";

export const LANGUAGE = "en";

export const DATE_FORMAT = "YYYY-MM-DD";

export const START_WEEK = "sun";

export const DATE_LOOKING_OPTIONS = ["forward", "backward", "middle"];

export const DAYS = [0, 1, 2, 3, 4, 5, 6];

export const MONTHS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

export const CALENDAR_SIZE = 42;

// Beware, these maps of colors cannot be replaced with functions using string interpolation such as `c-bg-${color}-100`
// as described in Tailwind documentation https://tailwindcss.com/docs/content-configuration#dynamic-class-names
export const BG_COLOR: Colors = {
  100: {
    blue: "c-bg-blue-100",
    orange: "c-bg-orange-100",
    yellow: "c-bg-yellow-100",
    red: "c-bg-red-100",
    purple: "c-bg-purple-100",
    amber: "c-bg-amber-100",
    lime: "c-bg-lime-100",
    green: "c-bg-green-100",
    emerald: "c-bg-emerald-100",
    teal: "c-bg-teal-100",
    cyan: "c-bg-cyan-100",
    sky: "c-bg-sky-100",
    indigo: "c-bg-indigo-100",
    violet: "c-bg-violet-100",
    fuchsia: "c-bg-fuchsia-100",
    pink: "c-bg-pink-100",
    rose: "c-bg-rose-100",
  },
  200: {
    blue: "c-bg-blue-200",
    orange: "c-bg-orange-200",
    yellow: "c-bg-yellow-200",
    red: "c-bg-red-200",
    purple: "c-bg-purple-200",
    amber: "c-bg-amber-200",
    lime: "c-bg-lime-200",
    green: "c-bg-green-200",
    emerald: "c-bg-emerald-200",
    teal: "c-bg-teal-200",
    cyan: "c-bg-cyan-200",
    sky: "c-bg-sky-200",
    indigo: "c-bg-indigo-200",
    violet: "c-bg-violet-200",
    fuchsia: "c-bg-fuchsia-200",
    pink: "c-bg-pink-200",
    rose: "c-bg-rose-200",
  },
  500: {
    blue: "c-bg-blue-500",
    orange: "c-bg-orange-500",
    yellow: "c-bg-yellow-500",
    red: "c-bg-red-500",
    purple: "c-bg-purple-500",
    amber: "c-bg-amber-500",
    lime: "c-bg-lime-500",
    green: "c-bg-green-500",
    emerald: "c-bg-emerald-500",
    teal: "c-bg-teal-500",
    cyan: "c-bg-cyan-500",
    sky: "c-bg-sky-500",
    indigo: "c-bg-indigo-500",
    violet: "c-bg-violet-500",
    fuchsia: "c-bg-fuchsia-500",
    pink: "c-bg-pink-500",
    rose: "c-bg-rose-500",
  },
  hover: {
    blue: "hover:c-bg-blue-600",
    orange: "hover:c-bg-orange-600",
    yellow: "hover:c-bg-yellow-600",
    red: "hover:c-bg-red-600",
    purple: "hover:c-bg-purple-600",
    amber: "hover:c-bg-amber-600",
    lime: "hover:c-bg-lime-600",
    green: "hover:c-bg-green-600",
    emerald: "hover:c-bg-emerald-600",
    teal: "hover:c-bg-teal-600",
    cyan: "hover:c-bg-cyan-600",
    sky: "hover:c-bg-sky-600",
    indigo: "hover:c-bg-indigo-600",
    violet: "hover:c-bg-violet-600",
    fuchsia: "hover:c-bg-fuchsia-600",
    pink: "hover:c-bg-pink-600",
    rose: "hover:c-bg-rose-600",
  },
};

export const TEXT_COLOR: Colors = {
  500: {
    blue: "c-text-blue-500",
    orange: "c-text-orange-500",
    yellow: "c-text-yellow-500",
    red: "c-text-red-500",
    purple: "c-text-purple-500",
    amber: "c-text-amber-500",
    lime: "c-text-lime-500",
    green: "c-text-green-500",
    emerald: "c-text-emerald-500",
    teal: "c-text-teal-500",
    cyan: "c-text-cyan-500",
    sky: "c-text-sky-500",
    indigo: "c-text-indigo-500",
    violet: "c-text-violet-500",
    fuchsia: "c-text-fuchsia-500",
    pink: "c-text-pink-500",
    rose: "c-text-rose-500",
  },
  600: {
    blue: "c-text-blue-600 dark:c-text-blue-400 dark:hover:c-text-blue-400",
    orange: "c-text-orange-600 dark:c-text-orange-400 dark:hover:c-text-orange-400",
    yellow: "c-text-yellow-600 dark:c-text-yellow-400 dark:hover:c-text-yellow-400",
    red: "c-text-red-600 dark:c-text-red-400 dark:hover:c-text-red-400",
    purple: "c-text-purple-600 dark:c-text-purple-400 dark:hover:c-text-purple-400",
    amber: "c-text-amber-600 dark:c-text-amber-400 dark:hover:c-text-amber-400",
    lime: "c-text-lime-600 dark:c-text-lime-400 dark:hover:c-text-lime-400",
    green: "c-text-green-600 dark:c-text-green-400 dark:hover:c-text-green-400",
    emerald:
      "c-text-emerald-600 dark:c-text-emerald-400 dark:hover:c-text-emerald-400",
    teal: "c-text-teal-600 dark:c-text-teal-400 dark:hover:c-text-teal-400",
    cyan: "c-text-cyan-600 dark:c-text-cyan-400 dark:hover:c-text-cyan-400",
    sky: "c-text-sky-600 dark:c-text-sky-400 dark:hover:c-text-sky-400",
    indigo: "c-text-indigo-600 dark:c-text-indigo-400 dark:hover:c-text-indigo-400",
    violet: "c-text-violet-600 dark:c-text-violet-400 dark:hover:c-text-violet-400",
    fuchsia:
      "c-text-fuchsia-600 dark:c-text-fuchsia-400 dark:hover:c-text-fuchsia-400",
    pink: "c-text-pink-600 dark:c-text-pink-400 dark:hover:c-text-pink-400",
    rose: "c-text-rose-600 dark:c-text-rose-400 dark:hover:c-text-rose-400",
  },
  hover: {
    blue: "hover:c-text-blue-700",
    orange: "hover:c-text-orange-700",
    yellow: "hover:c-text-yellow-700",
    red: "hover:c-text-red-700",
    purple: "hover:c-text-purple-700",
    amber: "hover:c-text-amber-700",
    lime: "hover:c-text-lime-700",
    green: "hover:c-text-green-700",
    emerald: "hover:c-text-emerald-700",
    teal: "hover:c-text-teal-700",
    cyan: "hover:c-text-cyan-700",
    sky: "hover:c-text-sky-700",
    indigo: "hover:c-text-indigo-700",
    violet: "hover:c-text-violet-700",
    fuchsia: "hover:c-text-fuchsia-700",
    pink: "hover:c-text-pink-700",
    rose: "hover:c-text-rose-700",
  },
};

export const BORDER_COLOR: Colors = {
  500: {
    blue: "border-blue-500",
    orange: "border-orange-500",
    yellow: "border-yellow-500",
    red: "border-red-500",
    purple: "border-purple-500",
    amber: "border-amber-500",
    lime: "border-lime-500",
    green: "border-green-500",
    emerald: "border-emerald-500",
    teal: "border-teal-500",
    cyan: "border-cyan-500",
    sky: "border-sky-500",
    indigo: "border-indigo-500",
    violet: "border-violet-500",
    fuchsia: "border-fuchsia-500",
    pink: "border-pink-500",
    rose: "border-rose-500",
  },
  focus: {
    blue: "focus:border-blue-500",
    orange: "focus:border-orange-500",
    yellow: "focus:border-yellow-500",
    red: "focus:border-red-500",
    purple: "focus:border-purple-500",
    amber: "focus:border-amber-500",
    lime: "focus:border-lime-500",
    green: "focus:border-green-500",
    emerald: "focus:border-emerald-500",
    teal: "focus:border-teal-500",
    cyan: "focus:border-cyan-500",
    sky: "focus:border-sky-500",
    indigo: "focus:border-indigo-500",
    violet: "focus:border-violet-500",
    fuchsia: "focus:border-fuchsia-500",
    pink: "focus:border-pink-500",
    rose: "focus:border-rose-500",
  },
};

export const RING_COLOR: Colors = {
  focus: {
    blue: "focus:ring-blue-500",
    orange: "focus:ring-orange-500",
    yellow: "focus:ring-yellow-500",
    red: "focus:ring-red-500",
    purple: "focus:ring-purple-500",
    amber: "focus:ring-amber-500",
    lime: "focus:ring-lime-500",
    green: "focus:ring-green-500",
    emerald: "focus:ring-emerald-500",
    teal: "focus:ring-teal-500",
    cyan: "focus:ring-cyan-500",
    sky: "focus:ring-sky-500",
    indigo: "focus:ring-indigo-500",
    violet: "focus:ring-violet-500",
    fuchsia: "focus:ring-fuchsia-500",
    pink: "focus:ring-pink-500",
    rose: "focus:ring-rose-500",
  },
  "second-focus": {
    blue: "focus:ring-blue-500/20",
    orange: "focus:ring-orange-500/20",
    yellow: "focus:ring-yellow-500/20",
    red: "focus:ring-red-500/20",
    purple: "focus:ring-purple-500/20",
    amber: "focus:ring-amber-500/20",
    lime: "focus:ring-lime-500/20",
    green: "focus:ring-green-500/20",
    emerald: "focus:ring-emerald-500/20",
    teal: "focus:ring-teal-500/20",
    cyan: "focus:ring-cyan-500/20",
    sky: "focus:ring-sky-500/20",
    indigo: "focus:ring-indigo-500/20",
    violet: "focus:ring-violet-500/20",
    fuchsia: "focus:ring-fuchsia-500/20",
    pink: "focus:ring-pink-500/20",
    rose: "focus:ring-rose-500/20",
  },
};

export const BUTTON_COLOR: Colors = {
  focus: {
    blue: "focus:ring-blue-500/50 focus:c-bg-blue-100/50",
    orange: "focus:ring-orange-500/50 focus:c-bg-orange-100/50",
    yellow: "focus:ring-yellow-500/50 focus:c-bg-yellow-100/50",
    red: "focus:ring-red-500/50 focus:c-bg-red-100/50",
    purple: "focus:ring-purple-500/50 focus:c-bg-purple-100/50",
    amber: "focus:ring-amber-500/50 focus:c-bg-amber-100/50",
    lime: "focus:ring-lime-500/50 focus:c-bg-lime-100/50",
    green: "focus:ring-green-500/50 focus:c-bg-green-100/50",
    emerald: "focus:ring-emerald-500/50 focus:c-bg-emerald-100/50",
    teal: "focus:ring-teal-500/50 focus:c-bg-teal-100/50",
    cyan: "focus:ring-cyan-500/50 focus:c-bg-cyan-100/50",
    sky: "focus:ring-sky-500/50 focus:c-bg-sky-100/50",
    indigo: "focus:ring-indigo-500/50 focus:c-bg-indigo-100/50",
    violet: "focus:ring-violet-500/50 focus:c-bg-violet-100/50",
    fuchsia: "focus:ring-fuchsia-500/50 focus:c-bg-fuchsia-100/50",
    pink: "focus:ring-pink-500/50 focus:c-bg-pink-100/50",
    rose: "focus:ring-rose-500/50 focus:c-bg-rose-100/50",
  },
};