import type { CSSProperties } from "react";

export type LayoutSpacing =
  | "xs"
  | "sm"
  | "md"
  | "lg"
  | "xl"
  | "2xl"
  | number
  | string;

const spacingTokens: Record<string, string> = {
  "2xl": "32px",
  lg: "16px",
  md: "12px",
  sm: "8px",
  xl: "24px",
  xs: "4px",
};

export type EdgeInsets = {
  all?: LayoutSpacing;
  bottom?: LayoutSpacing;
  horizontal?: LayoutSpacing;
  left?: LayoutSpacing;
  right?: LayoutSpacing;
  top?: LayoutSpacing;
  vertical?: LayoutSpacing;
};

export type SpacingValue = LayoutSpacing | EdgeInsets;

export function toCssSize(value: LayoutSpacing | undefined) {
  if (typeof value === "number") {
    return `${value}px`;
  }

  return value ? spacingTokens[value] ?? value : value;
}

export function edgeInsetsStyle(value?: SpacingValue, property: "margin" | "padding" = "padding"): CSSProperties {
  if (value === undefined) {
    return {};
  }

  if (typeof value === "number" || typeof value === "string") {
    return { [property]: toCssSize(value) };
  }

  const horizontal = toCssSize(value.horizontal);
  const vertical = toCssSize(value.vertical);

  return {
    ...(value.all !== undefined ? { [property]: toCssSize(value.all) } : {}),
    [`${property}Bottom`]: toCssSize(value.bottom) ?? vertical,
    [`${property}Left`]: toCssSize(value.left) ?? horizontal,
    [`${property}Right`]: toCssSize(value.right) ?? horizontal,
    [`${property}Top`]: toCssSize(value.top) ?? vertical,
  };
}

export function resolveGap(value: LayoutSpacing | undefined, fallback: LayoutSpacing) {
  return toCssSize(value ?? fallback);
}