import type {
  intervalToMillis,
  OrDashboardPreview,
  MAX_BREAKPOINT,
  scalingPresetToString,
  dashboardAccessToString,
  sortScreenPresets,
  getActivePreset,
  widgetTypes,
  registerWidgetTypes,
  OrDashboardBuilder,
} from "./lib/index.d.ts";
import type { OrDashboardBoardsettings } from "./lib/or-dashboard-boardsettings.d.ts";
import type { OrDashboardBrowser } from "./lib/or-dashboard-browser.d.ts";
import type { OrDashboardTree } from "./lib/or-dashboard-tree.d.ts";
import type { OrDashboardWidgetContainer } from "./lib/or-dashboard-widgetcontainer.d.ts";
import type { OrDashboardWidgetsettings } from "./lib/or-dashboard-widgetsettings.d.ts";

/**
 * This type can be used to create scoped tags for your components.
 *
 * Usage:
 *
 * ```ts
 * import type { ScopedElements } from "path/to/library/jsx-integration";
 *
 * declare module "my-library" {
 *   namespace JSX {
 *     interface IntrinsicElements
 *       extends ScopedElements<'test-', ''> {}
 *   }
 * }
 * ```
 *
 * @deprecated Runtime scoped elements result in duplicate types and can confusing for developers. It is recommended to use the `prefix` and `suffix` options to generate new types instead.
 */
export type ScopedElements<
  Prefix extends string = "",
  Suffix extends string = ""
> = {
  [Key in keyof CustomElements as `${Prefix}${Key}${Suffix}`]: CustomElements[Key];
};

type BaseProps<T extends HTMLElement> = {
  /** Content added between the opening and closing tags of the element */
  children?: any;
  /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
  class?: string;
  /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
  className?: string;
  /** Takes an object where the key is the class name(s) and the value is a boolean expression. When true, the class is applied, and when false, it is removed. */
  classList?: Record<string, boolean | undefined>;
  /** Specifies the text direction of the element. */
  dir?: "ltr" | "rtl";
  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
  exportparts?: string;
  /** For <label> and <output>, lets you associate the label with some control. */
  htmlFor?: string;
  /** Specifies whether the element should be hidden. */
  hidden?: boolean | string;
  /** A unique identifier for the element. */
  id?: string;
  /** Keys tell React which array item each component corresponds to */
  key?: string | number;
  /** Specifies the language of the element. */
  lang?: string;
  /** Defines the element's semantic role for accessibility APIs. */
  role?: string;
  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
  part?: string;
  /** Use the ref attribute with a variable to assign a DOM element to the variable once the element is rendered. */
  ref?: T | ((e: T) => void);
  /** Adds a reference for a custom element slot */
  slot?: string;
  /** Prop for setting inline styles */
  style?: Record<string, string | number>;
  /** Overrides the default Tab button behavior. Avoid using values other than -1 and 0. */
  tabIndex?: number;
  /** Specifies the tooltip text for the element. */
  title?: string;
  /** Passing 'no' excludes the element content from being translated. */
  translate?: "yes" | "no";
  /** The popover global attribute is used to designate an element as a popover element. */
  popover?: "auto" | "hint" | "manual";
  /** Turns an element element into a popover control button; takes the ID of the popover element to control as its value. */
  popovertarget?: "top" | "bottom" | "left" | "right" | "auto";
  /** Specifies the action to be performed on a popover element being controlled by a control element. */
  popovertargetaction?: "show" | "hide" | "toggle";
};

type BaseEvents = {};

export type OrDashboardBuilderProps = {
  /**  */
  config?: OrDashboardBuilder["config"];
  /**  */
  editMode?: OrDashboardBuilder["editMode"];
  /**  */
  fullscreen?: OrDashboardBuilder["fullscreen"];
  /**  */
  selectedId?: OrDashboardBuilder["selectedId"];
  /**  */
  realm?: OrDashboardBuilder["realm"];
  /**  */
  userId?: OrDashboardBuilder["userId"];
  /**  */
  readonly?: OrDashboardBuilder["readonly"];

  /**  */
  onselected?: (e: CustomEvent) => void;
  /**  */
  oneditToggle?: (e: CustomEvent) => void;
  /**  */
  onfullscreenToggle?: (e: CustomEvent) => void;
};

export type OrDashboardBuilderSolidJsProps = {
  /**  */
  "prop:config"?: OrDashboardBuilder["config"];
  /**  */
  "prop:editMode"?: OrDashboardBuilder["editMode"];
  /**  */
  "prop:fullscreen"?: OrDashboardBuilder["fullscreen"];
  /**  */
  "prop:selectedId"?: OrDashboardBuilder["selectedId"];
  /**  */
  "prop:realm"?: OrDashboardBuilder["realm"];
  /**  */
  "prop:userId"?: OrDashboardBuilder["userId"];
  /**  */
  "prop:readonly"?: OrDashboardBuilder["readonly"];
  /**  */
  "on:selected"?: (e: CustomEvent) => void;
  /**  */
  "on:editToggle"?: (e: CustomEvent) => void;
  /**  */
  "on:fullscreenToggle"?: (e: CustomEvent) => void;

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type OrDashboardBoardsettingsProps = {
  /**  */
  dashboard?: OrDashboardBoardsettings["dashboard"];
  /**  */
  showPerms?: OrDashboardBoardsettings["showPerms"];

  /**  */
  onupdate?: (e: CustomEvent) => void;
};

export type OrDashboardBoardsettingsSolidJsProps = {
  /**  */
  "prop:dashboard"?: OrDashboardBoardsettings["dashboard"];
  /**  */
  "prop:showPerms"?: OrDashboardBoardsettings["showPerms"];
  /**  */
  "on:update"?: (e: CustomEvent) => void;

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type OrDashboardBrowserProps = {
  /**  */
  columns?: OrDashboardBrowser["columns"];
  /**  */
  size?: OrDashboardBrowser["size"];
  /**  */
  itemSize?: OrDashboardBrowser["itemSize"];
};

export type OrDashboardBrowserSolidJsProps = {
  /**  */
  "prop:columns"?: OrDashboardBrowser["columns"];
  /**  */
  "prop:size"?: OrDashboardBrowser["size"];
  /**  */
  "prop:itemSize"?: OrDashboardBrowser["itemSize"];

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type OrDashboardPreviewProps = {
  /**  */
  template?: OrDashboardPreview["template"];
  /**  */
  dashboardId?: OrDashboardPreview["dashboardId"];
  /**  */
  realm?: OrDashboardPreview["realm"];
  /**  */
  selectedWidget?: OrDashboardPreview["selectedWidget"];
  /**  */
  editMode?: OrDashboardPreview["editMode"];
  /**  */
  readonly?: OrDashboardPreview["readonly"];
  /**  */
  previewWidth?: OrDashboardPreview["previewWidth"];
  /**  */
  previewHeight?: OrDashboardPreview["previewHeight"];
  /**  */
  previewZoom?: OrDashboardPreview["previewZoom"];
  /**  */
  previewSize?: OrDashboardPreview["previewSize"];
  /**  */
  availablePreviewSizes?: OrDashboardPreview["availablePreviewSizes"];
  /**  */
  fullscreen?: OrDashboardPreview["fullscreen"];

  /**  */
  ondeselected?: (e: CustomEvent) => void;
  /**  */
  onselected?: (e: CustomEvent) => void;
  /**  */
  onchanged?: (e: CustomEvent) => void;
  /**  */
  oncreated?: (e: CustomEvent) => void;
};

export type OrDashboardPreviewSolidJsProps = {
  /**  */
  "prop:template"?: OrDashboardPreview["template"];
  /**  */
  "prop:dashboardId"?: OrDashboardPreview["dashboardId"];
  /**  */
  "prop:realm"?: OrDashboardPreview["realm"];
  /**  */
  "prop:selectedWidget"?: OrDashboardPreview["selectedWidget"];
  /**  */
  "prop:editMode"?: OrDashboardPreview["editMode"];
  /**  */
  "prop:readonly"?: OrDashboardPreview["readonly"];
  /**  */
  "prop:previewWidth"?: OrDashboardPreview["previewWidth"];
  /**  */
  "prop:previewHeight"?: OrDashboardPreview["previewHeight"];
  /**  */
  "prop:previewZoom"?: OrDashboardPreview["previewZoom"];
  /**  */
  "prop:previewSize"?: OrDashboardPreview["previewSize"];
  /**  */
  "prop:availablePreviewSizes"?: OrDashboardPreview["availablePreviewSizes"];
  /**  */
  "prop:fullscreen"?: OrDashboardPreview["fullscreen"];
  /**  */
  "on:deselected"?: (e: CustomEvent) => void;
  /**  */
  "on:selected"?: (e: CustomEvent) => void;
  /**  */
  "on:changed"?: (e: CustomEvent) => void;
  /**  */
  "on:created"?: (e: CustomEvent) => void;

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type OrDashboardTreeProps = {
  /**  */
  dashboards?: OrDashboardTree["dashboards"];
  /**  */
  selected?: OrDashboardTree["selected"];
  /**  */
  realm?: OrDashboardTree["realm"];
  /**  */
  userId?: OrDashboardTree["userId"];
  /**  */
  readonly?: OrDashboardTree["readonly"];
  /**  */
  hasChanged?: OrDashboardTree["hasChanged"];
  /**  */
  showControls?: OrDashboardTree["showControls"];

  /**  */
  onupdated?: (e: CustomEvent) => void;
  /**  */
  onselect?: (e: CustomEvent) => void;
  /**  */
  oncreated?: (e: CustomEvent) => void;
};

export type OrDashboardTreeSolidJsProps = {
  /**  */
  "prop:dashboards"?: OrDashboardTree["dashboards"];
  /**  */
  "prop:selected"?: OrDashboardTree["selected"];
  /**  */
  "prop:realm"?: OrDashboardTree["realm"];
  /**  */
  "prop:userId"?: OrDashboardTree["userId"];
  /**  */
  "prop:readonly"?: OrDashboardTree["readonly"];
  /**  */
  "prop:hasChanged"?: OrDashboardTree["hasChanged"];
  /**  */
  "prop:showControls"?: OrDashboardTree["showControls"];
  /**  */
  "on:updated"?: (e: CustomEvent) => void;
  /**  */
  "on:select"?: (e: CustomEvent) => void;
  /**  */
  "on:created"?: (e: CustomEvent) => void;

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type OrDashboardWidgetsettingsProps = {
  /**  */
  selectedWidget?: OrDashboardWidgetsettings["selectedWidget"];

  /**  */
  onupdate?: (e: CustomEvent) => void;
};

export type OrDashboardWidgetsettingsSolidJsProps = {
  /**  */
  "prop:selectedWidget"?: OrDashboardWidgetsettings["selectedWidget"];
  /**  */
  "on:update"?: (e: CustomEvent) => void;

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CustomElements = {
  /**
   *
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `config`: undefined
   * - `editMode`: undefined
   * - `fullscreen`: undefined
   * - `selectedId`: undefined
   * - `realm`: undefined
   * - `userId`: undefined
   * - `readonly`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `selected`: undefined
   * - `editToggle`: undefined
   * - `fullscreenToggle`: undefined
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `loadAllDashboards(realm: string) => void`: undefined
   * - `deleteWidget(widget: DashboardWidget) => void`: undefined
   * - `selectWidget(widget: DashboardWidget) => void`: undefined
   * - `deselectWidget() => void`: undefined
   * - `selectDashboard(dashboard: Dashboard | undefined) => void`: undefined
   * - `_onDashboardNameChanged(ev: Event) => void`: undefined
   * - `openDashboardInInsights() => void`: undefined
   * - `shareUrl(method: string) => void`: undefined
   * - `saveDashboard() => void`: undefined
   */
  "or-dashboard-builder": Partial<
    OrDashboardBuilderProps & BaseProps<OrDashboardBuilder> & BaseEvents
  >;

  /**
   *
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `dashboard`: undefined
   * - `showPerms`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `update`: undefined
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `forceParentUpdate(force: boolean = false) => void`: undefined
   * - `setToMobilePreset() => void`: undefined
   * - `scalingPresetTemplate(screenPresets: DashboardScreenPreset[], scalingPresets: SelectItem[]) => void`: undefined
   * - `screenPresetTemplate(screenPresets: DashboardScreenPreset[], customLabels?: string[]) => void`: undefined
   */
  "or-dashboard-boardsettings": Partial<
    OrDashboardBoardsettingsProps &
      BaseProps<OrDashboardBoardsettings> &
      BaseEvents
  >;

  /**
   *
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `columns`: undefined
   * - `size`: undefined
   * - `itemSize`: undefined
   */
  "or-dashboard-browser": Partial<
    OrDashboardBrowserProps & BaseProps<OrDashboardBrowser> & BaseEvents
  >;

  /**
   *
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `template`: undefined
   * - `dashboardId`: undefined
   * - `realm`: undefined
   * - `selectedWidget`: undefined
   * - `editMode`: undefined
   * - `readonly`: undefined
   * - `previewWidth`: undefined
   * - `previewHeight`: undefined
   * - `previewZoom`: undefined
   * - `previewSize`: undefined
   * - `availablePreviewSizes`: undefined
   * - `fullscreen`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `deselected`: undefined
   * - `selected`: undefined
   * - `changed`: undefined
   * - `created`: undefined
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `setupGrid(recreate: boolean, force: boolean = false) => void`: undefined
   * - `refreshPreview() => void`: undefined
   * - `refreshWidgets() => void`: undefined
   */
  "or-dashboard-preview": Partial<
    OrDashboardPreviewProps & BaseProps<OrDashboardPreview> & BaseEvents
  >;

  /**
   *
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `dashboards`: undefined
   * - `selected`: undefined
   * - `realm`: undefined
   * - `userId`: undefined
   * - `readonly`: undefined
   * - `hasChanged`: undefined
   * - `showControls`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `updated`: undefined
   * - `select`: undefined
   * - `created`: undefined
   */
  "or-dashboard-tree": Partial<
    OrDashboardTreeProps & BaseProps<OrDashboardTree> & BaseEvents
  >;

  /**
   *
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `selectedWidget`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `update`: undefined
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `forceParentUpdate(changes: Map<string, any>, force: boolean = false) => void`: undefined
   */
  "or-dashboard-widgetsettings": Partial<
    OrDashboardWidgetsettingsProps &
      BaseProps<OrDashboardWidgetsettings> &
      BaseEvents
  >;
};

export type CustomElementsSolidJs = {
  /**
   *
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `config`: undefined
   * - `editMode`: undefined
   * - `fullscreen`: undefined
   * - `selectedId`: undefined
   * - `realm`: undefined
   * - `userId`: undefined
   * - `readonly`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `selected`: undefined
   * - `editToggle`: undefined
   * - `fullscreenToggle`: undefined
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `loadAllDashboards(realm: string) => void`: undefined
   * - `deleteWidget(widget: DashboardWidget) => void`: undefined
   * - `selectWidget(widget: DashboardWidget) => void`: undefined
   * - `deselectWidget() => void`: undefined
   * - `selectDashboard(dashboard: Dashboard | undefined) => void`: undefined
   * - `_onDashboardNameChanged(ev: Event) => void`: undefined
   * - `openDashboardInInsights() => void`: undefined
   * - `shareUrl(method: string) => void`: undefined
   * - `saveDashboard() => void`: undefined
   */
  "or-dashboard-builder": Partial<
    OrDashboardBuilderProps &
      OrDashboardBuilderSolidJsProps &
      BaseProps<OrDashboardBuilder> &
      BaseEvents
  >;

  /**
   *
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `dashboard`: undefined
   * - `showPerms`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `update`: undefined
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `forceParentUpdate(force: boolean = false) => void`: undefined
   * - `setToMobilePreset() => void`: undefined
   * - `scalingPresetTemplate(screenPresets: DashboardScreenPreset[], scalingPresets: SelectItem[]) => void`: undefined
   * - `screenPresetTemplate(screenPresets: DashboardScreenPreset[], customLabels?: string[]) => void`: undefined
   */
  "or-dashboard-boardsettings": Partial<
    OrDashboardBoardsettingsProps &
      OrDashboardBoardsettingsSolidJsProps &
      BaseProps<OrDashboardBoardsettings> &
      BaseEvents
  >;

  /**
   *
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `columns`: undefined
   * - `size`: undefined
   * - `itemSize`: undefined
   */
  "or-dashboard-browser": Partial<
    OrDashboardBrowserProps &
      OrDashboardBrowserSolidJsProps &
      BaseProps<OrDashboardBrowser> &
      BaseEvents
  >;

  /**
   *
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `template`: undefined
   * - `dashboardId`: undefined
   * - `realm`: undefined
   * - `selectedWidget`: undefined
   * - `editMode`: undefined
   * - `readonly`: undefined
   * - `previewWidth`: undefined
   * - `previewHeight`: undefined
   * - `previewZoom`: undefined
   * - `previewSize`: undefined
   * - `availablePreviewSizes`: undefined
   * - `fullscreen`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `deselected`: undefined
   * - `selected`: undefined
   * - `changed`: undefined
   * - `created`: undefined
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `setupGrid(recreate: boolean, force: boolean = false) => void`: undefined
   * - `refreshPreview() => void`: undefined
   * - `refreshWidgets() => void`: undefined
   */
  "or-dashboard-preview": Partial<
    OrDashboardPreviewProps &
      OrDashboardPreviewSolidJsProps &
      BaseProps<OrDashboardPreview> &
      BaseEvents
  >;

  /**
   *
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `dashboards`: undefined
   * - `selected`: undefined
   * - `realm`: undefined
   * - `userId`: undefined
   * - `readonly`: undefined
   * - `hasChanged`: undefined
   * - `showControls`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `updated`: undefined
   * - `select`: undefined
   * - `created`: undefined
   */
  "or-dashboard-tree": Partial<
    OrDashboardTreeProps &
      OrDashboardTreeSolidJsProps &
      BaseProps<OrDashboardTree> &
      BaseEvents
  >;

  /**
   *
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `selectedWidget`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `update`: undefined
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `forceParentUpdate(changes: Map<string, any>, force: boolean = false) => void`: undefined
   */
  "or-dashboard-widgetsettings": Partial<
    OrDashboardWidgetsettingsProps &
      OrDashboardWidgetsettingsSolidJsProps &
      BaseProps<OrDashboardWidgetsettings> &
      BaseEvents
  >;
};

export type CustomCssProperties = {};

declare module "react" {
  namespace JSX {
    interface IntrinsicElements extends CustomElements {}
  }
  export interface CSSProperties extends CustomCssProperties {}
}

declare module "preact" {
  namespace JSX {
    interface IntrinsicElements extends CustomElements {}
  }
  export interface CSSProperties extends CustomCssProperties {}
}

declare module "@builder.io/qwik" {
  namespace JSX {
    interface IntrinsicElements extends CustomElements {}
  }
  export interface CSSProperties extends CustomCssProperties {}
}

declare module "@stencil/core" {
  namespace JSX {
    interface IntrinsicElements extends CustomElements {}
  }
  export interface CSSProperties extends CustomCssProperties {}
}

declare module "hono/jsx" {
  namespace JSX {
    interface IntrinsicElements extends CustomElements {}
  }
  export interface CSSProperties extends CustomCssProperties {}
}

declare module "react-native" {
  namespace JSX {
    interface IntrinsicElements extends CustomElements {}
  }
  export interface CSSProperties extends CustomCssProperties {}
}

declare module "solid-js" {
  namespace JSX {
    interface IntrinsicElements extends CustomElementsSolidJs {}
  }
  export interface CSSProperties extends CustomCssProperties {}
}

declare global {
  namespace JSX {
    interface IntrinsicElements extends CustomElements {}
  }
  export interface CSSProperties extends CustomCssProperties {}
}
