// ChartTooltipContent — presentational Marko port of shadcn's
// <ChartTooltipContent>. Class strings are verbatim from chart.tsx,
// including the nestLabel behavior (single row + non-dot indicator moves
// the label inside the row). No state: the owning chart tag positions it
// and supplies resolved rows.
import { cn } from "#lib/utils.ts";
import { tooltip as styles } from "./classes.ts";

export interface TooltipRow {
  key: string;
  label: string;
  value: number | string;
  color: string;
  icon?: Marko.Renderable;
}

export interface Input extends Marko.Input<"div"> {
  rows: TooltipRow[];
  /** Resolved x label — already run through the chart config by the caller. */
  label?: string;
  indicator?: "line" | "dot" | "dashed";
  hideLabel?: boolean;
  hideIndicator?: boolean;
}

static function formatValue(value: number | string): string {
  return typeof value === "number" ? value.toLocaleString() : String(value);
}

<const/{
  rows,
  label,
  indicator = "dot",
  hideLabel,
  hideIndicator,
  class: className,
  ...rest
}=input/>
<const/showLabel=(!hideLabel && label != null && label !== "")/>
<const/isDotIndicator=(indicator === "dot")/>
<const/isLineIndicator=(indicator === "line")/>
<const/isDashedIndicator=(indicator === "dashed")/>
<const/nestLabel=(rows.length === 1 && !isDotIndicator)/>

<div
  ...rest
  class=cn(styles.root, className)
>
  <if=(showLabel && !nestLabel)>
    <div class=styles.label>${label}</div>
  </if>
  <div class=styles.rows>
    <for|row| of=rows>
      <div
        class=cn(
          styles.row,
          isDotIndicator && styles.rowItemsCenter,
        )
      >
        <if=row.icon>
          <${row.icon}/>
        </if>
        <else if=(!hideIndicator)>
          <div
            class=cn(
              styles.indicator,
              isDotIndicator && styles.indicatorDot,
              isLineIndicator && styles.indicatorLine,
              isDashedIndicator && styles.indicatorDashed,
              nestLabel && isDashedIndicator && styles.indicatorDashedNested,
            )
            style=`--color-bg: ${row.color}; --color-border: ${row.color};`
          ></div>
        </else>
        <div
          class=cn(
            styles.rowContent,
            nestLabel ? styles.rowContentNested : styles.rowContentDefault,
          )
        >
          <div class=styles.rowContentLabels>
            <if=(showLabel && nestLabel)>
              <div class=styles.label>${label}</div>
            </if>
            <span class=styles.rowLabel>${row.label}</span>
          </div>
          <if=(row.value != null)>
            <span class=styles.rowValue>
              ${formatValue(row.value)}
            </span>
          </if>
        </div>
      </div>
    </for>
  </div>
</div>