import type { DefineComponent } from "vue";

type CodeBlockProps = {
  /** Determines the container styles of component. Flat enables nesting within other containers. */
  container?: "flat" | "inline" | "default";
  /** Programming language that processes the codeblock. */
  language?:
    | "bash"
    | "css"
    | "go"
    | "html"
    | "javascript"
    | "json"
    | "markdown"
    | "python"
    | "shell"
    | "toml"
    | "typescript"
    | "xml"
    | "yaml";
  /** Text code to be process into a codeblock. */
  code?: string | "default";
  /** Adds styling to show the line numbers of the codeblock. */
  "line-numbers"?: boolean | "default";
  /** Adds styling to highlight the provided code lines.
For many lines: use Comma seperated values, ex: (1,5,7).
For range of lines, use hyphen seperated values, ex: (1-5).
You can combine both such as: ex: (1,5,10-15,20). */
  highlight?: string | "default";
};

export type CustomElements = {
  /**
   * A container for content representing programming languages.
   * ---
   *
   *
   * ### **Slots:**
   *  - _default_ - for declarative slotting of source code and not using the `code` property
   * - **actions** - slot for action bar
   *
   * ### **CSS Properties:**
   *  - **--background** - undefined _(default: undefined)_
   * - **--padding** - undefined _(default: undefined)_
   * - **--border-radius** - undefined _(default: undefined)_
   * - **--border** - undefined _(default: undefined)_
   * - **--font-family** - undefined _(default: undefined)_
   * - **--white-space** - undefined _(default: undefined)_
   */
  "nve-codeblock": DefineComponent<CodeBlockProps>;
};

declare module "vue" {
  // eslint-disable-next-line @typescript-eslint/no-empty-interface
  interface GlobalComponents extends CustomElements {}
}

declare global {
  namespace JSX {
    // eslint-disable-next-line @typescript-eslint/no-empty-interface
    interface IntrinsicElements extends CustomElements {}
  }
}