/**
 * Shared Plotly look (SDK control refresh 9a), resolved from the MINT tokens.
 *
 * Plotly cannot read `var(--…)`, so the tokens are resolved to computed values
 * at call time; call it again after a theme change. PlotlyChart applies it by
 * default. For a raw Plotly chart use `{ template: mintPlotlyTemplate() }`.
 */
import type { LayoutAxis, Template } from 'plotly.js-dist-min'

import { SAMPLE_COLOR_SCALE, SAMPLE_GROUP_TOKENS } from './color'

/** Resolve tokens from `element` (default: `<html>`), falling back to `<html>` for detached elements. */
export function mintPlotlyTemplate(element?: Element): Template {
  const root = getComputedStyle(document.documentElement)
  const own = element ? getComputedStyle(element) : root
  const token = (name: string): string | undefined =>
    own.getPropertyValue(name).trim() || root.getPropertyValue(name).trim() || undefined

  const axis: Partial<LayoutAxis> = {
    gridcolor: token('--border-light'),
    linecolor: token('--border-color'),
    zerolinecolor: token('--border-color'),
    tickfont: { family: token('--font-mono'), size: 11, color: token('--text-secondary') },
  }
  const font = { family: token('--font-sans'), size: 12, color: token('--text-primary') }

  return {
    layout: {
      paper_bgcolor: 'rgba(0,0,0,0)',
      plot_bgcolor: 'rgba(0,0,0,0)',
      // Group tokens (`var(--…)` stripped to the property name); the hex scale covers pages without the SDK CSS.
      colorway: SAMPLE_GROUP_TOKENS.map((ref, index) => token(ref.slice(4, -1)) ?? SAMPLE_COLOR_SCALE[index]),
      font,
      xaxis: { ...axis, showline: true },
      yaxis: axis,
      hoverlabel: { bgcolor: token('--bg-card'), bordercolor: token('--border-color'), font },
    },
  }
}