/// <reference path="../../index.d.ts" />
import type { PublicLitElement as LitElement } from "@arcgis/lumina";
import type { Appearance, Scale } from "../interfaces.js";
import type { NumberingSystem } from "../../utils/locale.js";
import type { MeterFillType, MeterLabelType } from "./interfaces.js";
import type { T9nMeta } from "@arcgis/lumina/controllers";

/**
 * @cssproperty [--calcite-meter-background-color] - Specifies the background color of the component.
 * @cssproperty [--calcite-meter-border-color] - Specifies the border color of the component and displayed step lines.
 * @cssproperty [--calcite-meter-shadow] - Specifies the box shadow of the component.
 * @cssproperty [--calcite-meter-corner-radius] - Specifies the corner radius of the component.
 * @cssproperty [--calcite-meter-fill-color] - Specifies the color of the component's fill.
 * @cssproperty [--calcite-meter-range-text-color] - Specifies the color of the component's range labels.
 * @cssproperty [--calcite-meter-value-text-color] - Specifies the color of the component's value label.
 */
export abstract class Meter extends LitElement {
  /**
   * Specifies the appearance of the component.
   *
   * @default "outline-fill"
   */
  accessor appearance: Extract<"outline" | "outline-fill" | "solid", Appearance>;
  /**
   * When `true`, interaction is prevented and the component is displayed with lower opacity.
   *
   * @default false
   */
  accessor disabled: boolean;
  /**
   * Specifies the component's display, where
   * `"single"` displays a single color, and
   * `"range"` displays a range of colors based on provided `low`, `high`, `min` or `max` values.
   *
   * @default "range"
   */
  accessor fillType: MeterFillType;
  /**
   * Specifies the `id` of the component's associated form.
   *
   * When not set, the component is associated with its ancestor form element, if one exists.
   */
  accessor form: string;
  /**
   * When `true`, number values are displayed with a group separator corresponding to the language and country format.
   *
   * @default false
   */
  accessor groupSeparator: boolean;
  /** Specifies a high value.  When `fillType` is `"range"`, displays a different color when above the specified threshold. */
  accessor high: number;
  /**
   * Specifies an accessible label for the component.
   *
   * @required
   */
  accessor label: string;
  /** Specifies a low value.  When `fillType` is `"range"`, displays a different color when above the specified threshold. */
  accessor low: number;
  /**
   * Specifies the component's highest allowed value.
   *
   * @default 100
   */
  accessor max: number;
  /** @internal */
  protected messages: Partial<Record<string, never>> & T9nMeta<Record<string, never>>;
  /**
   * Specifies the component's lowest allowed value.
   *
   * @default 0
   */
  accessor min: number;
  /** Specifies the name of the component. Required to pass the component's `value` on form submission. */
  accessor name: string;
  /** Specifies the Unicode numeral system used by the component for localization. */
  accessor numberingSystem: NumberingSystem;
  /**
   * When `true`, displays the values of `high`, `low`, `min`, and `max`.
   *
   * @default false
   */
  accessor rangeLabels: boolean;
  /**
   * When `rangeLabels` is `true`, specifies the format of displayed labels.
   *
   * @default "percent"
   */
  accessor rangeLabelType: MeterLabelType;
  /**
   * Specifies the size of the component.
   *
   * @default "m"
   */
  accessor scale: Scale;
  /**
   * When `rangeLabelType` is `"units"` and either `valueLabel` or `rangeLabels` are `true`, displays beside the `value` and/or  `min` values.
   *
   * @default ""
   */
  accessor unitLabel: string;
  /** Specifies the component's value. */
  accessor value: number;
  /**
   * When `true`, displays the `value`.
   *
   * @default false
   */
  accessor valueLabel: boolean;
  /**
   * When `valueLabel` is `true`, specifies the format of displayed label.
   *
   * @default "percent"
   */
  accessor valueLabelType: MeterLabelType;
}