
import type { OrAttributeBarChart } from "./lib/index.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;
  /** 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 OrAttributeBarChartProps = {
  /** Asset data to display in the bar chart. This array needs to be populated.
Used for the chart legend, information about units, and retrieval of data points. */
  "assets"?: OrAttributeBarChart['assets'];
  /** List of attributes to display in the bar chart. This array needs to be populated.
Used for the chart legend, and the retrieval of data points.
Formatted as a JSON array of;

```[<index of assets>, Attribute]``` */
  "assetAttributes"?: OrAttributeBarChart['assetAttributes'];
  /** Realm name to associate all the chart data with. */
  "realm"?: OrAttributeBarChart['realm'];
  /** The list of HEX colors representing the line color for each AttributeRef.
Acts as an override, and will fall back to the colors attribute if not specified.
The AttributeRef object with Asset ID and Attribute name need to be present in the Chart to work.
The HEX color should be put in without '#' prefix. For example, you'd use '4d9d2a' instead of '#4d9d2a'. */
  "attributeColors"?: OrAttributeBarChart['attributeColors'];
  /** The attribute configuration object with, for example, a list of right-axis attributes.
See BarChartAttributeConfig for full documentation on the options. */
  "attributeConfig"?: OrAttributeBarChart['attributeConfig'];
  /** List of colors to display attributes values with inside the bar chart.
The array corresponds with assetAttributes, so the 1st color will be used for the 1st attribute. */
  "colors"?: OrAttributeBarChart['colors'];
  /** The query object to request attribute data / data points with.
Normally, it's of type AssetDatapointIntervalQuery, including a start- and end time. */
  "datapointQuery"?: OrAttributeBarChart['datapointQuery'];
  /** Selected timeframe using a [start date, end date] array format. */
  "timeframe"?: OrAttributeBarChart['timeframe'];
  /** Custom ECharts options object to configure the chart appearance.
See their documentation for more info: https://echarts.apache.org/en/option.html */
  "chartOptions"?: OrAttributeBarChart['chartOptions'];
  /** Shows a right-side legend with the list of visible attributes. */
  "showLegend"?: OrAttributeBarChart['showLegend'];
  /** Shows the right-side legend (toggled with showLegend) in a compact / dense format. */
  "denseLegend"?: OrAttributeBarChart['denseLegend'];
  /** Displays the bar chart in a vertically "stacked" configuration.
It will display a cumulative effect of all data series on top of each other. */
  "stacked"?: OrAttributeBarChart['stacked'];
  /** Enables time control for the user, allowing them to customize the timeframe shown.
Leaving this disabled/unset will show them in a "read-only" state. */
  "timestampControls"?: OrAttributeBarChart['timestampControls'];
  /** Number of decimals to display for attributes. */
  "decimals"?: OrAttributeBarChart['decimals'];
  /** A JSON array list of strings that represent the prefix options in the UI, such as "current" or "last".
In combination with timeWindowOptions, it provides a timeframe like "current 1 hour" to display data of. */
  "timePrefixOptions"?: OrAttributeBarChart['timePrefixOptions'];
  /** The selected option from timePrefixOptions, such as "current" or "last".
In combination with timeWindowOptions, it provides a timeframe like "current 1 hour" to display data of. */
  "timePrefixKey"?: OrAttributeBarChart['timePrefixKey'];
  /** A JSON object containing a list of time window options, like "1 day", "6 hours" or "52 weeks".
In combination with timePrefixOptions, it provides a timeframe like "last 6 hours" to display data of.
The input should contain a JavaScript Map, containing the following:
- A string with a unique key like "6hours",
- A combination of any moment.unitOfTime.DurationConstructor and number, like ["hours", 6]

Example input: `{"6hours": ["hours", 6], "4weeks": ["weeks", 4]}` */
  "timeWindowOptions"?: OrAttributeBarChart['timeWindowOptions'];
  /** The key value of the selected option from timeWindowOptions, such as "1day", "6hours" or "52weeks".
In combination with timePrefixOptions, it provides a timeframe like "last 6 hours" to display data of. */
  "timeWindowKey"?: OrAttributeBarChart['timeWindowKey'];
  /** A JSON object containing a list of interval options, like "30minutes", "hour" or "day".
It determines the interval to display data in sections. For example, split the data every 5 minutes of the past hour.
In combination with the active formula in datapointQuery, such as AVG and MIN/MAX, it will show a '5 minute' average of the past hour.
The input should contain a JavaScript Map, containing the following:
- A BarChartInterval string with a unique key like "hour" or "day",
- A IntervalConfig object with details on the interval, such as the display name and the unit of time.

Example input:
```
{"30minutes": {
  displayName: "30Minutes", // translated automatically
  steps: 30,
  orFormat: "minute",
  momentFormat: "minutes", // using moment.js format
  millis: 1800000
}}
``` */
  "intervalOptions"?: OrAttributeBarChart['intervalOptions'];
  /** The key value of the selected option from intervalOptions, such as "30minute", "hour" or "week".
In combination with the active formula in datapointQuery, such as AVG and MIN/MAX, it will show a '5 minute' average of the past hour. */
  "interval"?: OrAttributeBarChart['interval'];


}

  export type CustomElements = {


  /**
     * 
 * 
 * ## Attributes & Properties
 * 
 * Component attributes and properties that can be applied to the element or by using JavaScript.
 * 
 * - `assets`: Asset data to display in the bar chart. This array needs to be populated.
 * Used for the chart legend, information about units, and retrieval of data points. 
 * - `assetAttributes`: List of attributes to display in the bar chart. This array needs to be populated.
 * Used for the chart legend, and the retrieval of data points.
 * Formatted as a JSON array of;
 * 
 * ```[<index of assets>, Attribute]``` 
 * - `realm`: Realm name to associate all the chart data with. 
 * - `attributeColors`: The list of HEX colors representing the line color for each AttributeRef.
 * Acts as an override, and will fall back to the colors attribute if not specified.
 * The AttributeRef object with Asset ID and Attribute name need to be present in the Chart to work.
 * The HEX color should be put in without '#' prefix. For example, you'd use '4d9d2a' instead of '#4d9d2a'. 
 * - `attributeConfig`: The attribute configuration object with, for example, a list of right-axis attributes.
 * See BarChartAttributeConfig for full documentation on the options. 
 * - `colors`: List of colors to display attributes values with inside the bar chart.
 * The array corresponds with assetAttributes, so the 1st color will be used for the 1st attribute. 
 * - `datapointQuery`: The query object to request attribute data / data points with.
 * Normally, it's of type AssetDatapointIntervalQuery, including a start- and end time. 
 * - `timeframe`: Selected timeframe using a [start date, end date] array format. 
 * - `chartOptions`: Custom ECharts options object to configure the chart appearance.
 * See their documentation for more info: https://echarts.apache.org/en/option.html 
 * - `showLegend`: Shows a right-side legend with the list of visible attributes. 
 * - `denseLegend`: Shows the right-side legend (toggled with showLegend) in a compact / dense format. 
 * - `stacked`: Displays the bar chart in a vertically "stacked" configuration.
 * It will display a cumulative effect of all data series on top of each other. 
 * - `timestampControls`: Enables time control for the user, allowing them to customize the timeframe shown.
 * Leaving this disabled/unset will show them in a "read-only" state. 
 * - `decimals`: Number of decimals to display for attributes. 
 * - `timePrefixOptions`: A JSON array list of strings that represent the prefix options in the UI, such as "current" or "last".
 * In combination with timeWindowOptions, it provides a timeframe like "current 1 hour" to display data of. 
 * - `timePrefixKey`: The selected option from timePrefixOptions, such as "current" or "last".
 * In combination with timeWindowOptions, it provides a timeframe like "current 1 hour" to display data of. 
 * - `timeWindowOptions`: A JSON object containing a list of time window options, like "1 day", "6 hours" or "52 weeks".
 * In combination with timePrefixOptions, it provides a timeframe like "last 6 hours" to display data of.
 * The input should contain a JavaScript Map, containing the following:
 * - A string with a unique key like "6hours",
 * - A combination of any moment.unitOfTime.DurationConstructor and number, like ["hours", 6]
 * 
 * Example input: `{"6hours": ["hours", 6], "4weeks": ["weeks", 4]}` 
 * - `timeWindowKey`: The key value of the selected option from timeWindowOptions, such as "1day", "6hours" or "52weeks".
 * In combination with timePrefixOptions, it provides a timeframe like "last 6 hours" to display data of. 
 * - `intervalOptions`: A JSON object containing a list of interval options, like "30minutes", "hour" or "day".
 * It determines the interval to display data in sections. For example, split the data every 5 minutes of the past hour.
 * In combination with the active formula in datapointQuery, such as AVG and MIN/MAX, it will show a '5 minute' average of the past hour.
 * The input should contain a JavaScript Map, containing the following:
 * - A BarChartInterval string with a unique key like "hour" or "day",
 * - A IntervalConfig object with details on the interval, such as the display name and the unit of time.
 * 
 * Example input:
 * ```
 * {"30minutes": {
 *   displayName: "30Minutes", // translated automatically
 *   steps: 30,
 *   orFormat: "minute",
 *   momentFormat: "minutes", // using moment.js format
 *   millis: 1800000
 * }}
 * ``` 
 * - `interval`: The key value of the selected option from intervalOptions, such as "30minute", "hour" or "week".
 * In combination with the active formula in datapointQuery, such as AVG and MIN/MAX, it will show a '5 minute' average of the past hour. 
 * 
 * ## Methods
 * 
 * Methods that can be called to access component functionality.
 * 
 * - `getDefaultTimePrefixOptions() => string[]`: undefined
 * - `getDefaultTimeWindowOptions() => Map<string, [moment.unitOfTime.DurationConstructor, number]>`: undefined
 * - `getDefaultIntervalOptions() => Map<BarChartInterval, IntervalConfig>`: undefined
  */
    "or-attribute-barchart": Partial<OrAttributeBarChartProps & BaseProps<OrAttributeBarChart> & 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 global {
  namespace JSX {
    interface IntrinsicElements extends CustomElements {}
  }
  export interface CSSProperties extends CustomCssProperties {}
}
