/// <reference path="../../index.d.ts" />
import type MapView from "@arcgis/core/views/MapView.js";
import type SceneView from "@arcgis/core/views/SceneView.js";
import type { PublicLitElement as LitElement } from "@arcgis/lumina";
import type { ActionBar as ActionBar } from "@esri/calcite-components/components/calcite-action-bar";
import type { Button as Button } from "@esri/calcite-components/components/calcite-button";

/**
 * The View Popover component provides view-aware placement and sizing for popovers anchored to actions inside
 * a map or scene view. This component is critical to enabling a great user experience with popovers
 * when the exact placement and content of the popover is highly variable.
 *
 * This component was originally added to support arcgis-sketch, which can be placed in all corners
 * of the view, in multiple orientations, and with highly configurable settings contents.
 *
 * Because layer lists and grid controls are included in the settings popover, it is very common for
 * the popover to overflow the view. It is equally common for the settings popover to be quite compact.
 *
 * Provide the popover content through the default slot and assign a [view](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-view-popover/#view),
 * [anchorElement](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-view-popover/#anchorElement), and [actionBarElement](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-view-popover/#actionBarElement)
 * to enable automatic positioning within the view.
 *
 * @since 5.1
 * @internal
 */
export abstract class ArcgisViewPopover extends LitElement {
  /** The calcite action bar that owns the anchor action; must be set for correct layout. */
  accessor actionBarElement: ActionBar | undefined;
  get actionBarLayout(): ActionBarLayout;
  /** The action element that anchors the popover. */
  accessor anchorElement: HTMLElement | undefined;
  /**
   * Indicates whether the popover includes a close action in the header.
   *
   * @default true
   */
  accessor closable: boolean;
  /** The popover heading. */
  accessor heading: string | undefined;
  /** Accessible label for the popover. */
  accessor label: string | undefined;
  /**
   * Maximum content width, in pixels, applied to the slotted popover content.
   *
   * @default 400
   */
  accessor maxContentWidth: number;
  /**
   * Minimum content width, in pixels, applied to the slotted popover content.
   *
   * @default 300
   */
  accessor minContentWidth: number;
  /**
   * Indicates whether the popover is open.
   *
   * Listen for [@arcgisPropertyChange](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-view-popover/#event-arcgisPropertyChange) to react to user-driven close actions.
   *
   * @default false
   */
  accessor open: boolean;
  /**
   * Controls whether the popover appears attached to the action itself or to the containing action bar.
   *
   * @default "bar"
   */
  accessor tailAttachmentAppearance: TailAttachmentAppearance;
  /** The view that constrains popover placement and sizing. */
  accessor view: MapView | SceneView | undefined;
  /**
   * Minimum inset, in pixels, between the popover and the edges of the view.
   * The bottom edge will be relative to the attribution bar, if it is visible.
   *
   * @default 16
   */
  accessor viewEdgeMargin: number;
  /**
   * Visual scale for the popover; this applies only to the header and close button.
   *
   * @default "m"
   */
  accessor visualScale: Button["scale"];
  /** Emitted when the value of a property is changed. Use this to listen to changes to properties. */
  readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "open"; }>;
  readonly "@eventTypes": {
    arcgisPropertyChange: ArcgisViewPopover["arcgisPropertyChange"]["detail"];
  };
}

/** @internal */
export type ActionBarLayout = "horizontal" | "vertical";

/** @internal */
export type TailAttachmentAppearance = "action" | "bar";