import type {
  getIncludedProperties,
  getIncludedAttributes,
  OrAssetViewerComputeGridEvent,
  OrAssetViewerRequestSaveEvent,
  OrAssetViewerSaveEvent,
  OrAssetViewerRequestEditToggleEvent,
  OrAssetViewerEditToggleEvent,
  OrAssetViewerLoadUserEvent,
  OrAssetViewerLoadAlarmEvent,
  getPanel,
  getAttributeTemplate,
  getPropertyTemplate,
  getField,
  saveAsset,
  DEFAULT_ASSET_PROPERTIES,
  DEFAULT_VIEWER_CONFIG,
  OrAssetViewer,
} from "./lib/index.d.ts";
import type {
  OrAddAttributePanelAttributeChangedEvent,
  OrAddAttributePanel,
} from "./lib/or-add-attribute-panel.d.ts";
import type {
  OrEditAssetModifiedEvent,
  OrEditAssetPanel,
} from "./lib/or-edit-asset-panel.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 OrAssetViewerProps = {
  /**  */
  asset?: OrAssetViewer["asset"];
  /**  */
  assetId?: OrAssetViewer["assetId"];
  /**  */
  config?: OrAssetViewer["config"];
  /**  */
  editMode?: OrAssetViewer["editMode"];
  /**  */
  readonly?: OrAssetViewer["readonly"];
  /** When language is changed, we clear the cached templates,
so can be rendered differently according to the selected language. */
  langChangedCallback?: OrAssetViewer["langChangedCallback"];

  /**  */
  onedit?: (e: OrAssetViewerEditToggleEvent) => void;
  /**  */
  onsaveResult?: (e: OrAssetViewerSaveEvent) => void;
};

export type OrAssetViewerSolidJsProps = {
  /**  */
  "prop:asset"?: OrAssetViewer["asset"];
  /**  */
  "prop:assetId"?: OrAssetViewer["assetId"];
  /**  */
  "prop:config"?: OrAssetViewer["config"];
  /**  */
  "prop:editMode"?: OrAssetViewer["editMode"];
  /**  */
  "prop:readonly"?: OrAssetViewer["readonly"];
  /** When language is changed, we clear the cached templates,
so can be rendered differently according to the selected language. */
  "prop:langChangedCallback"?: OrAssetViewer["langChangedCallback"];
  /**  */
  "on:edit"?: (e: OrAssetViewerEditToggleEvent) => void;
  /**  */
  "on:saveResult"?: (e: OrAssetViewerSaveEvent) => void;

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

export type OrAddAttributePanelProps = {
  /**  */
  isCustom?: OrAddAttributePanel["isCustom"];
  /**  */
  isArray?: OrAddAttributePanel["isArray"];
  /**  */
  arrayDimensions?: OrAddAttributePanel["arrayDimensions"];
};

export type OrAddAttributePanelSolidJsProps = {
  /**  */
  "prop:isCustom"?: OrAddAttributePanel["isCustom"];
  /**  */
  "prop:isArray"?: OrAddAttributePanel["isArray"];
  /**  */
  "prop:arrayDimensions"?: OrAddAttributePanel["arrayDimensions"];

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

export type OrEditAssetPanelProps = {};

export type OrEditAssetPanelSolidJsProps = {
  /** 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.
   *
   * - `asset`: undefined
   * - `assetId`: undefined
   * - `config`: undefined
   * - `editMode`: undefined
   * - `readonly`: undefined
   * - `langChangedCallback`: When language is changed, we clear the cached templates,
   * so can be rendered differently according to the selected language. (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `edit`: undefined
   * - `saveResult`: undefined
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `isModified() => void`: undefined
   * - `loadAssetInfo(asset: Asset) => Promise<AssetInfo>`: undefined
   * - `save() => void`: undefined
   * - `_onEvent(event: SharedEvent) => void`: undefined
   */
  "or-asset-viewer": Partial<
    OrAssetViewerProps & BaseProps<OrAssetViewer> & BaseEvents
  >;

  /**
   *
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `isCustom`: undefined
   * - `isArray`: undefined
   * - `arrayDimensions`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `undefined`: undefined
   */
  "or-add-attribute-panel": Partial<
    OrAddAttributePanelProps & BaseProps<OrAddAttributePanel> & BaseEvents
  >;

  /**
   *
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `undefined`: undefined
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `attributeUpdated(attributeName: string) => void`: undefined
   * - `validate() => ValidatorResult[]`: undefined
   */
  "or-edit-asset-panel": Partial<
    OrEditAssetPanelProps & BaseProps<OrEditAssetPanel> & BaseEvents
  >;
};

export type CustomElementsSolidJs = {
  /**
   *
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `asset`: undefined
   * - `assetId`: undefined
   * - `config`: undefined
   * - `editMode`: undefined
   * - `readonly`: undefined
   * - `langChangedCallback`: When language is changed, we clear the cached templates,
   * so can be rendered differently according to the selected language. (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `edit`: undefined
   * - `saveResult`: undefined
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `isModified() => void`: undefined
   * - `loadAssetInfo(asset: Asset) => Promise<AssetInfo>`: undefined
   * - `save() => void`: undefined
   * - `_onEvent(event: SharedEvent) => void`: undefined
   */
  "or-asset-viewer": Partial<
    OrAssetViewerProps &
      OrAssetViewerSolidJsProps &
      BaseProps<OrAssetViewer> &
      BaseEvents
  >;

  /**
   *
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `isCustom`: undefined
   * - `isArray`: undefined
   * - `arrayDimensions`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `undefined`: undefined
   */
  "or-add-attribute-panel": Partial<
    OrAddAttributePanelProps &
      OrAddAttributePanelSolidJsProps &
      BaseProps<OrAddAttributePanel> &
      BaseEvents
  >;

  /**
   *
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `undefined`: undefined
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `attributeUpdated(attributeName: string) => void`: undefined
   * - `validate() => ValidatorResult[]`: undefined
   */
  "or-edit-asset-panel": Partial<
    OrEditAssetPanelProps &
      OrEditAssetPanelSolidJsProps &
      BaseProps<OrEditAssetPanel> &
      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 {}
}