import type Widget from "../Widget.js";
import type ListItem from "./ListItem.js";
import type { Icon } from "@esri/calcite-components/components/calcite-icon";
import type { IdentifiableMixin, IdentifiableMixinProperties } from "../../core/Identifiable.js";
import type { WidgetProperties } from "../Widget.js";

export interface ListItemPanelProperties extends WidgetProperties, IdentifiableMixinProperties, Partial<Pick<ListItemPanel, "content" | "disabled" | "flowEnabled" | "image" | "listItem" | "open" | "title">> {
  /**
   * Icon which represents the panel.
   *
   * @since 4.27
   * @see [Calcite Icon Search](https://developers.arcgis.com/calcite-design-system/icons/)
   * @see [Calcite Icon Search](https://developers.arcgis.com/calcite-design-system/icons/)
   */
  icon?: Icon["icon"] | null;
  /**
   * Indicates whether the ListItemPanel is visible.
   *
   * @default true
   * @example
   * const tableList = new TableList({
   *   listItemCreatedFunction: async (event) => {
   *     const { item } = event;
   *     const { layer } = item;
   *
   *     item.panel = {
   *       content: document.getElementById("myDiv"),
   *       open: true
   *     };
   *
   *     // hide the panel for a specific table
   *     if (layer.title.includes("Confidential")) {
   *       item.panel.visible = false;
   *     }
   *   },
   *   view
   * });
   * @example
   * // Hides the widget in the view
   * widget.visible = false;
   */
  visible?: boolean;
}

/**
 * The content displayed in the ListItem panel. This can be a [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String),
 * a [Widget](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Widget.html) instance, or an [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement).
 *
 * @see [content](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-TableList-ListItemPanel.html#content)
 */
export type ListItemPanelContent = Widget | HTMLElement | string;

/**
 * Defines the content(s) that can be displayed in a ListItem panel. This can be a single content item
 * or an array of content items, allowing for flexible panel layouts.
 *
 * @see [content](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-TableList-ListItemPanel.html#content)
 */
export type ListItemPanelContents = ListItemPanelContent | ListItemPanelContent[];

/**
 * This class allows you to display custom content for each [ListItem](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-TableList-ListItem.html)
 * in the [TableList](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-TableList.html) widget. ListItemPanel objects typically aren't constructed.
 * Rather, they are modified using the [TableList.listItemCreatedFunction](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-TableList.html#listItemCreatedFunction)
 * property in the [TableList](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-TableList.html) widget.
 *
 * @since 4.29
 * @see [TableList](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-TableList.html)
 * @see [ListItem](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-TableList-ListItem.html)
 * @see [ListItem.panel](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-TableList-ListItem.html#panel)
 * @example
 * const tableList = new TableList({
 *   view: view,
 *   listItemCreatedFunction: (event) =>{
 *     const { item } = event;
 *     const layer = item.layer;
 *
 *     const count = await layer.queryFeatureCount();
 *
 *     item.panel = {
 *       content: `Number of records: ${count}`,
 *       icon: "data-magnifying-glass",
 *     };
 *   }
 * });
 */
export default class ListItemPanel extends ListItemPanelSuperclass {
  constructor(properties?: ListItemPanelProperties);
  /**
   * The content displayed in the ListItem panel. This can be a [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String),
   * a [Widget](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Widget.html) instance, an [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement),
   * or an [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) of any of those elements.
   *
   * @example
   * const tableList = new TableList({
   *   view: view,
   *   listItemCreatedFunction: (event) => {
   *     const { item } = event;
   *     const { layer } = item;
   *
   *     const count = await layer.queryFeatureCount();
   *
   *     item.panel = {
   *       content: `Number of records: ${count}`,
   *       icon: "data-magnifying-glass",
   *     };
   *   }
   * });
   */
  accessor content: ListItemPanelContents | null | undefined;
  /**
   * If `true`, disables the ListItem's panel so the user cannot open or interact with it.
   * The panel will be disabled by default if it does not have content.
   *
   * @example
   * const tableList = new TableList({
   *   view: view,
   *   listItemCreatedFunction: (event) => {
   *     const { item } = event;
   *     item.panel = {
   *       content: document.getElementById("myDiv"),
   *       disabled: true,
   *       icon: "graph-bar"
   *     };
   *   }
   * });
   */
  accessor disabled: boolean;
  /**
   * Indicates whether the panel's content should be rendered as a [Calcite Flow Item](https://developers.arcgis.com/calcite-design-system/components/flow-item/).
   * By default, the panel's content is rendered in the [content-bottom](https://developers.arcgis.com/calcite-design-system/components/list-item/#api-reference-slots-content-bottom) slot.
   * [Flow](https://developers.arcgis.com/calcite-design-system/components/flow/) is a calcite component that allows for drilling in and out of panels.
   *
   * @default false
   * @since 4.29
   */
  accessor flowEnabled: boolean;
  /**
   * Icon which represents the panel.
   *
   * @since 4.27
   * @see [Calcite Icon Search](https://developers.arcgis.com/calcite-design-system/icons/)
   * @see [Calcite Icon Search](https://developers.arcgis.com/calcite-design-system/icons/)
   */
  accessor icon: Icon["icon"] | null | undefined;
  /**
   * The URL or data URI of an image used to represent the panel.
   * This property will be used as a background image for the node.
   * If neither `image` nor `icon` are specified, a default icon
   * ![default icon](https://developers.arcgis.com/javascript/latest/assets/img/guide/whats-new/41/default-action.png) will display.
   */
  accessor image: string | null | undefined;
  /** The panel's parent ListItem that represents a table in the map. */
  accessor listItem: ListItem | null | undefined;
  /**
   * Indicates if the panel's content is open and visible to the user.
   *
   * @default false
   * @example
   * const tableList = new TableList({
   *   view: view,
   *   listItemCreatedFunction: (event) => {
   *     const { item } = event;
   *     item.panel = {
   *       content: document.getElementById("myDiv"),
   *       icon: "graph-bar",
   *       open: true
   *     };
   *   }
   * });
   */
  accessor open: boolean;
  /**
   * The title of the panel. By default, this title matches the
   * [ListItem's title](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-TableList-ListItem.html#title). Changing this
   * value will not change the title of the ListItem in the TableList.
   */
  accessor title: string;
  /**
   * Indicates whether the ListItemPanel is visible.
   *
   * @default true
   * @example
   * const tableList = new TableList({
   *   listItemCreatedFunction: async (event) => {
   *     const { item } = event;
   *     const { layer } = item;
   *
   *     item.panel = {
   *       content: document.getElementById("myDiv"),
   *       open: true
   *     };
   *
   *     // hide the panel for a specific table
   *     if (layer.title.includes("Confidential")) {
   *       item.panel.visible = false;
   *     }
   *   },
   *   view
   * });
   * @example
   * // Hides the widget in the view
   * widget.visible = false;
   */
  accessor visible: boolean;
}
declare const ListItemPanelSuperclass: typeof Widget & typeof IdentifiableMixin