import type Widget from "../../../Widget.js";
import type { WidgetProperties } from "../../../Widget.js";

/**
 * Defines the set of properties that can be used to construct a CardView instance.
 * Includes widget base properties and specific options for configuring the card-style legend view.
 *
 * @since 5.0
 */
export interface CardViewProperties extends WidgetProperties, Partial<Pick<CardView, "layout">> {}

/**
 * Specifies the layout options for the card-style legend.
 *
 * - `auto`: This layout is responsive so that in wide views the legend has a side-by-side layout, and a stack layout in smaller (mobile) views.
 * - `side-by-side`: The legend has a landscape orientation that allows users to scroll horizontally to view multiple legend cards at a time.
 * - `stack`: The legend cards are stacked, which conserves space, but restricts the user to seeing only one card at a time.
 *
 * @see [layout](https://developers.arcgis.com/javascript/latest/references/core/widgets/Legend/styles/card/CardView/#layout)
 * @since 5.0
 */
export type CardLayout = "auto" | "stack" | "side-by-side";

/**
 * In wide views, the legend has a landscape orientation that allows users to scroll horizontally to view all legend elements.
 * This style can be responsive, making it ideal for mobile web apps. In smaller views, the legend collapses to occupy less space.
 *
 * @see [Legend.style](https://developers.arcgis.com/javascript/latest/references/core/widgets/Legend/#style)
 * @since 5.0
 */
export default class CardView extends Widget {
  constructor(properties?: CardViewProperties);
  /**
   * You can specify one of the following layout options.
   *
   * Value | Description
   * ------|------------
   * auto | This layout is responsive so that in wide views the legend has a `side-by-side` layout, and a `stack` layout in smaller (mobile) views.
   * side-by-side | The legend has a landscape orientation that allows users to scroll horizontally to view multiple legend cards at a time.
   * stack | The legend cards are stacked, which conserves space, but restricts the user to seeing only one card at a time.
   *
   * @default "stack"
   * @since 5.0
   */
  accessor layout: CardLayout;
  /**
   * The type of style. For Card this value is always `card`.
   *
   * @since 5.0
   */
  get type(): "card";
}