import { afterEach, beforeEach, describe, expect, it } from 'vitest'
import { mintPlotlyTemplate } from '../../utils/plotlyTemplate'

const tokens: Record<string, string> = {
  '--mint-sample-1': '#111111',
  '--mint-sample-2': '#222222',
  '--mint-sample-3': '#333333',
  '--mint-sample-4': '#444444',
  '--mint-sample-5': '#555555',
  '--mint-sample-6': '#666666',
  '--mint-sample-7': '#777777',
  '--mint-sample-8': '#888888',
  '--font-sans': 'Fira Sans',
  '--font-mono': 'Fira Code',
  '--text-primary': '#1E293B',
  '--text-secondary': '#64748B',
  '--border-light': '#F3F4F6',
  '--border-color': '#E5E7EB',
  '--bg-card': '#FFFFFF',
}

describe('mintPlotlyTemplate', () => {
  beforeEach(() => {
    for (const [name, value] of Object.entries(tokens)) document.documentElement.style.setProperty(name, value)
  })

  afterEach(() => {
    document.documentElement.removeAttribute('style')
  })

  it('should take the colorway from the eight group tokens when they are defined', () => {
    expect(mintPlotlyTemplate().layout?.colorway).toEqual(
      ['#111111', '#222222', '#333333', '#444444', '#555555', '#666666', '#777777', '#888888'],
    )
  })

  it('should set 12px sans body text in the primary text color when tokens are defined', () => {
    expect(mintPlotlyTemplate().layout?.font).toEqual({ family: 'Fira Sans', size: 12, color: '#1E293B' })
  })

  it('should set 11px mono ticks in the secondary text color when tokens are defined', () => {
    expect(mintPlotlyTemplate().layout?.yaxis?.tickfont).toEqual({ family: 'Fira Code', size: 11, color: '#64748B' })
  })

  it('should draw the grid with --border-light when tokens are defined', () => {
    expect(mintPlotlyTemplate().layout?.xaxis?.gridcolor).toBe('#F3F4F6')
  })

  it('should draw axis lines with --border-color when tokens are defined', () => {
    expect(mintPlotlyTemplate().layout?.xaxis?.linecolor).toBe('#E5E7EB')
  })

  it('should style the hover label as a bordered card when tokens are defined', () => {
    expect(mintPlotlyTemplate().layout?.hoverlabel).toMatchObject({ bgcolor: '#FFFFFF', bordercolor: '#E5E7EB' })
  })

  it('should read tokens from the given element when it overrides them', () => {
    const element = document.createElement('div')
    element.style.setProperty('--text-primary', '#F8FAFC')
    document.body.appendChild(element)
    expect(mintPlotlyTemplate(element).layout?.font?.color).toBe('#F8FAFC')
    element.remove()
  })

  it('should fall back to the hex group scale when the group tokens are missing', () => {
    document.documentElement.removeAttribute('style')
    expect(mintPlotlyTemplate().layout?.colorway?.[0]).toBe('#3B82F6')
  })
})