# Meter — accessible headless meter (gauge)
#
# For known-range measurements (disk usage, password strength, etc.).
# Exposes value and thresholds as CSS custom properties.
# Ships zero CSS.
#
# Usage:
#   Meter value: 0.7, low: 0.3, high: 0.8, optimum: 0.5
#   Meter value: 75, min: 0, max: 100

export Meter = component
  @value:: number := 0
  @min:: number := 0
  @max:: number := 1
  @low:: any := null
  @high:: any := null
  @optimum:: any := null
  @label:: any := null

  percent ~= Math.min(100, Math.max(0, ((@value - @min) / (@max - @min)) * 100))

  level ~=
    return 'optimum' unless @low? and @high?
    if @value <= @low then 'low'
    else if @value >= @high then 'high'
    else 'optimum'

  render
    div role: "meter"
      aria-valuenow: @value
      aria-valuemin: @min
      aria-valuemax: @max
      aria-label: @label?!
      style: "--meter-value: #{@value}; --meter-percent: #{percent}%"
      $level: level
      slot
