import range from "lodash/range.js";
import defaultTheme from "tailwindcss/defaultTheme.js";
import { objectKeys } from "../../utils/objectKeys.js";
const ROOT_FONT_SIZE = 16;
const TAILWIND_SPACING_UNIT = 4;
const pxToTw = (px) => px / TAILWIND_SPACING_UNIT;
const twToPx = (tw) => tw * TAILWIND_SPACING_UNIT;
const pxToRem = (px) => `${px / ROOT_FONT_SIZE}rem`;
const twToRem = (tw) => pxToRem(twToPx(tw));
const colors = [
  "current",
  "transparent",
  "black",
  "white",
  // Midnight / gray
  "space-100",
  "space-200",
  "space-300",
  "space-400",
  "space-500",
  "space-600",
  "space-700",
  "space-800",
  "space-900",
  "space-1000",
  "space-1100",
  "space-1200",
  "space-1300",
  "space-1400",
  "space-1500",
  "space-1600",
  "space-1700",
  "space-1800",
  // Purple
  "purple-100",
  "purple-200",
  "purple-300",
  "purple-400",
  "purple-500",
  "purple-600",
  "purple-700",
  "purple-800",
  "purple-900",
  "purple-1000",
  "purple-1100",
  "purple-1200",
  // Green
  "starfield-100",
  "starfield-200",
  "starfield-300",
  "starfield-400",
  "starfield-500",
  "starfield-600",
  "starfield-700",
  "starfield-800",
  "starfield-900",
  "starfield-1000",
  "starfield-1100",
  // Yellow
  "solar-100",
  "solar-200",
  "solar-300",
  "solar-400",
  "solar-500",
  "solar-600",
  "solar-700",
  "solar-800",
  "solar-900",
  "solar-1000",
  "solar-1100",
  // Red / pink
  "sonja-100",
  "sonja-200",
  "sonja-300",
  "sonja-400",
  "sonja-500",
  "sonja-600",
  "sonja-700",
  "sonja-800",
  "sonja-900",
  "sonja-1000",
  "sonja-1100",
  // Sky blue
  "galactic-100",
  "galactic-200",
  "galactic-300",
  "galactic-400",
  "galactic-500",
  "galactic-600",
  "galactic-700",
  "galactic-800",
  "galactic-900",
  "galactic-1000",
  "galactic-1100",
  // Aliases
  "focus",
  "placeholder",
  // TODO: The following colors are deprecated. Replace them by the new colors everywhere (including in apps), then remove them.
  "white-4",
  "white-8",
  "white-12",
  "midnight",
  "midnight-dark",
  "purple",
  "blue",
  "turquoise",
  "green",
  "yellow",
  "red",
  "pink",
  "gray",
  "overlay"
];
const opacities = [
  100,
  95,
  90,
  88,
  // TODO: Replace by 90 and remove
  85,
  80,
  75,
  70,
  65,
  64,
  // TODO: Replace by 60 and remove
  60,
  55,
  50,
  48,
  // TODO: Replace by 50 and remove
  45,
  40,
  35,
  32,
  // TODO: Replace by 30 and remove
  30,
  25,
  20,
  16,
  // TODO: Replace by 15 and remove
  15,
  10,
  8,
  // TODO: Replace by 10 and remove
  5,
  4,
  // TODO: Replace by 5 and remove
  2,
  // TODO: Remove?
  0
];
const durations = [
  0,
  25,
  50,
  75,
  100,
  150,
  200,
  250,
  300,
  400,
  500,
  700,
  1e3,
  1500,
  2e3,
  3e3,
  4e3,
  5e3
];
const defaultDuration = 150;
const getDurationValue = (duration) => `${duration}ms`;
const easings = {
  linear: "linear",
  in: [0.4, 0, 1, 1],
  out: [0, 0, 0.4, 1],
  "in-out": [0.4, 0, 0.4, 1]
};
const defaultEasing = "in-out";
const getEasingValue = (easing) => typeof easings[easing] === "string" ? easings[easing] : `cubic-bezier(${easings[easing].join(", ")})`;
const theme = {
  screens: {
    "2xs": "384px",
    xs: "512px",
    sm: "640px",
    md: "768px",
    lg: "1024px",
    xl: "1280px",
    "2xl": "1536px"
  },
  fontFamily: {
    sans: `'EuclidCircular', sans-serif`,
    mono: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace`
  },
  fontWeight: {
    light: "300",
    regular: "400",
    medium: "500",
    semibold: "600",
    bold: "700"
  },
  fontSize: {
    128: [pxToRem(128), { lineHeight: pxToRem(128), letterSpacing: pxToRem(-2) }],
    96: [pxToRem(96), { lineHeight: pxToRem(96), letterSpacing: pxToRem(-2) }],
    64: [pxToRem(64), { lineHeight: pxToRem(72), letterSpacing: pxToRem(-2) }],
    48: [pxToRem(48), { lineHeight: pxToRem(56), letterSpacing: pxToRem(-1.6) }],
    40: [pxToRem(40), { lineHeight: pxToRem(48), letterSpacing: pxToRem(-1.2) }],
    32: [pxToRem(32), { lineHeight: pxToRem(44), letterSpacing: pxToRem(-0.8) }],
    24: [pxToRem(24), { lineHeight: pxToRem(36), letterSpacing: pxToRem(-0.4) }],
    20: [pxToRem(20), { lineHeight: pxToRem(34), letterSpacing: pxToRem(-0.2) }],
    18: [pxToRem(18), { lineHeight: pxToRem(32), letterSpacing: pxToRem(-0.1) }],
    16: [pxToRem(16), { lineHeight: pxToRem(28), letterSpacing: pxToRem(0) }],
    14: [pxToRem(14), { lineHeight: pxToRem(24), letterSpacing: pxToRem(0) }],
    12: [pxToRem(12), { lineHeight: pxToRem(18), letterSpacing: pxToRem(0) }],
    10: [pxToRem(10), { lineHeight: pxToRem(14), letterSpacing: pxToRem(0) }]
  },
  lineHeight: ({ theme: theme2 }) => {
    const spacing = theme2("spacing");
    return {
      none: "1",
      normal: "1.75",
      ...Object.fromEntries(
        Object.entries(spacing).flatMap(([key, value]) => {
          const keyNumber = Number(key);
          return keyNumber >= 0 && keyNumber <= 32 ? [[key, value]] : [];
        })
      )
    };
  },
  letterSpacing: {
    normal: "0",
    caption: pxToRem(2)
  },
  colors: {
    inherit: "inherit",
    ...Object.fromEntries(
      colors.map((color) => {
        if (color === "current") return [color, "currentcolor"];
        if (color === "transparent") return [color, "transparent"];
        return [color, `rgb(var(--gds-color-${color}) / 1)`];
      })
    )
  },
  opacity: {
    ...Object.fromEntries(opacities.map((opacity) => [opacity, `${opacity / 100}`]))
  },
  borderRadius: {
    none: "0",
    2: pxToRem(2),
    4: pxToRem(4),
    6: pxToRem(6),
    8: pxToRem(8),
    10: pxToRem(10),
    12: pxToRem(12),
    16: pxToRem(16),
    full: "9999px",
    // `calc(infinity * 1px)` is more technically correct, but it breaks some Motion animations (e.g. `ExperimentalSegmentedControl`)
    inherit: "inherit"
  },
  transitionDuration: {
    DEFAULT: getDurationValue(defaultDuration),
    ...Object.fromEntries(durations.map((duration) => [duration, getDurationValue(duration)]))
  },
  transitionDelay: {
    ...Object.fromEntries(durations.map((duration) => [duration, getDurationValue(duration)]))
  },
  transitionTimingFunction: {
    DEFAULT: getEasingValue(defaultEasing),
    ...Object.fromEntries(objectKeys(easings).map((easing) => [easing, getEasingValue(easing)]))
  },
  extend: {
    spacing: {
      ...Object.fromEntries(range(0, 360 + 1).map((value) => [value, twToRem(value)])),
      "4.5": pxToRem(18),
      "5.5": pxToRem(22),
      "6.5": pxToRem(26),
      "7.5": pxToRem(30),
      "8.5": pxToRem(34),
      "9.5": pxToRem(38),
      auto: "auto"
    },
    scale: {
      ...Object.fromEntries(range(0, 200 + 1, 5).map((value) => [value, `${value / 100}`]))
    },
    rotate: {
      "270": "270deg",
      "360": "360deg"
    },
    zIndex: {
      100: "100",
      1e3: "1000"
    },
    transitionProperty: {
      DEFAULT: `${defaultTheme.transitionProperty.DEFAULT}, outline-color`,
      colors: `${defaultTheme.transitionProperty.colors}, outline-color`
    },
    gridTemplateColumns: ({ theme: theme2 }) => {
      const spacing = theme2("spacing");
      return {
        ...Object.fromEntries(
          Object.entries(spacing).map(([key, value]) => [
            `auto-fill-${key}`,
            `repeat(auto-fill, minmax(min(${value}, 100%), 1fr))`
          ])
        ),
        ...Object.fromEntries(
          Object.entries(spacing).map(([key, value]) => [
            `auto-fit-${key}`,
            `repeat(auto-fit, minmax(min(${value}, 100%), 1fr))`
          ])
        )
      };
    }
  }
};
export {
  colors,
  defaultDuration,
  defaultEasing,
  durations,
  easings,
  opacities,
  pxToRem,
  pxToTw,
  theme,
  twToPx,
  twToRem
};
