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> }
> {}