import { SvelteComponentTyped } from "svelte";
import type { SvelteHTMLElements } from "svelte/elements";

export type SpacingScale = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13;

export type SpacingValue = SpacingScale | string;

type $RestProps = SvelteHTMLElements["any"];

type $Props = {
  /**
   * Set the background fill using a Carbon theme token.
   * @default undefined
   */
  fill?: "background" | "layer-01" | "layer-02" | "layer-03" | "field" | "inverse";

  /**
   * Set padding on all sides. Numbers `1`–`13` use the shared layout scale; strings accept any CSS length.
   * @default undefined
   */
  padding?: SpacingValue | undefined;

  /**
   * Set horizontal padding. Numbers `1`–`13` use the shared layout scale; strings accept any CSS length.
   * @default undefined
   */
  paddingX?: SpacingValue | undefined;

  /**
   * Set vertical padding. Numbers `1`–`13` use the shared layout scale; strings accept any CSS length.
   * @default undefined
   */
  paddingY?: SpacingValue | undefined;

  /**
   * Set margin on all sides. Numbers `1`–`13` use the shared layout scale; strings accept any CSS length.
   * @default undefined
   */
  margin?: SpacingValue | undefined;

  /**
   * Set horizontal margin. Numbers `1`–`13` use the shared layout scale; strings accept any CSS length.
   * @default undefined
   */
  marginX?: SpacingValue | undefined;

  /**
   * Set vertical margin. Numbers `1`–`13` use the shared layout scale; strings accept any CSS length.
   * @default undefined
   */
  marginY?: SpacingValue | undefined;

  /**
   * Set the border using a Carbon border token.
   * @default undefined
   */
  border?: "subtle" | "strong" | "interactive" | "disabled";

  /**
   * Set the width. Numbers are treated as pixels; strings accept any CSS length.
   * @default undefined
   */
  width?: number | string | undefined;

  /**
   * Set the max width. Numbers are treated as pixels; strings accept any CSS length.
   * @default undefined
   */
  maxWidth?: number | string | undefined;

  /**
   * Set the min width. Numbers are treated as pixels; strings accept any CSS length.
   * @default undefined
   */
  minWidth?: number | string | undefined;

  /**
   * Set to `true` to span the full width of the container
   * @default false
   */
  fullWidth?: boolean;

  /**
   * Specify the tag name.
   * @default "div"
   */
  tag?: keyof HTMLElementTagNameMap;

  children?: (this: void) => void;

  [key: `data-${string}`]: unknown;
};

export type BoxProps = Omit<$RestProps, keyof $Props> & $Props;

export default class Box extends SvelteComponentTyped<
  BoxProps,
  Record<string, any>,
  { default: Record<string, never> }
> {}