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.
   *
   * If `false`, the list item panel will not be rendered in the HTML document.
   *
   * @default true
   * @example
   * const layerList = new LayerList({
   *   listItemCreatedFunction: async (event) => {
   *     const { item } = event;
   *     const { layer } = item;
   *
   *     item.panel = {
   *       content: "legend",
   *       open: true
   *     };
   *
   *     // hide the panel for a specific layer
   *     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/references/core/widgets/Widget/) instance, or an [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement).
 * If the string `legend` is used, then an instance of the [Legend](https://developers.arcgis.com/javascript/latest/references/core/widgets/Legend/) widget is placed in the content.
 *
 * @see [content](https://developers.arcgis.com/javascript/latest/references/core/widgets/LayerList/ListItemPanel/#content)
 */
export type ListItemPanelContent = "legend" | 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/references/core/widgets/LayerList/ListItemPanel/#content)
 */
export type ListItemPanelContents = ListItemPanelContent | ListItemPanelContent[];

/**
 * This class allows you to display custom content for each [ListItem](https://developers.arcgis.com/javascript/latest/references/core/widgets/LayerList/ListItem/)
 * in the [LayerList](https://developers.arcgis.com/javascript/latest/references/core/widgets/LayerList/) widget. ListItemPanel objects typically aren't constructed.
 * Rather, they are modified using the [LayerList.listItemCreatedFunction](https://developers.arcgis.com/javascript/latest/references/core/widgets/LayerList/#listItemCreatedFunction)
 * property.
 *
 * A common scenario for using ListItemPanel is to display a [Legend](https://developers.arcgis.com/javascript/latest/references/core/widgets/Legend/) widget within each list item.
 * This allows users to create a legend for each layer in the map simply by adding the string "legend" as the [content](https://developers.arcgis.com/javascript/latest/references/core/widgets/LayerList/ListItemPanel/#content).
 *
 * @since 4.7
 * @see [LayerList](https://developers.arcgis.com/javascript/latest/references/core/widgets/LayerList/)
 * @see [ListItem](https://developers.arcgis.com/javascript/latest/references/core/widgets/LayerList/ListItem/)
 * @see [ListItem.panel](https://developers.arcgis.com/javascript/latest/references/core/widgets/LayerList/ListItem/#panel)
 * @example
 * const layerList = new LayerList({
 *   view: view,
 *   listItemCreatedFunction: function(event){
 *     const { item } = event;
 *     // displays the legend for each layer list item
 *     item.panel = {
 *       content: "legend"
 *     };
 *   }
 * });
 */
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/references/core/widgets/Widget/) 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.
   *
   * If the string `legend` is used, then an instance of the [Legend](https://developers.arcgis.com/javascript/latest/references/core/widgets/Legend/)
   * widget is placed in the content.
   *
   * @example
   * const layerList = new LayerList({
   *   view: view,
   *   listItemCreatedFunction: (event) => {
   *     const { item } = event;
   *     // displays the legend for each layer list item
   *     item.panel = {
   *       content: "legend"
   *     };
   *   }
   * });
   */
  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 or if it contains
   * a legend with no active content in it.
   *
   * @since 4.25
   * @example
   * const layerList = new LayerList({
   *   view: view,
   *   listItemCreatedFunction: (event) => {
   *     const { item } = event;
   *     if (!item.layer.visible){
   *       item.panel.disabled = true;
   *     }
   *   }
   * });
   */
  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/images/guide/whats-new/41/default-action.png) will display.
   */
  accessor image: string | null | undefined;
  /** The panel's parent ListItem that represents a layer 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 layerList = new LayerList({
   *   listItemCreatedFunction: async (event) => {
   *     const { item } = event;
   *     const { layer } = item;
   *
   *    // add a legend as the content and open the panel by default
   *     item.panel = {
   *       content: "legend",
   *       open: true
   *     };
   *   },
   *   view
   * });
   */
  accessor open: boolean;
  /**
   * The title of the panel. By default, this title matches the
   * [ListItem.title](https://developers.arcgis.com/javascript/latest/references/core/widgets/LayerList/ListItem/#title). Changing this
   * value will not change the title of the ListItem in the LayerList.
   */
  accessor title: string;
  /**
   * Indicates whether the ListItemPanel is visible.
   *
   * If `false`, the list item panel will not be rendered in the HTML document.
   *
   * @default true
   * @example
   * const layerList = new LayerList({
   *   listItemCreatedFunction: async (event) => {
   *     const { item } = event;
   *     const { layer } = item;
   *
   *     item.panel = {
   *       content: "legend",
   *       open: true
   *     };
   *
   *     // hide the panel for a specific layer
   *     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