import type { Config, Dictionary, LocalOptions } from 'style-dictionary/types'

import type { TokenWithCTIAttrs } from '../../types.js'

import { describe, expect, it } from 'vitest'

import { processTypographyTokens } from './typography-processor.js'

describe('processTypographyTokens', () => {
  const createMockToken = (
    attributes: Record<string, any>,
    type = 'typography',
  ): TokenWithCTIAttrs =>
    ({
      $type: type,
      attributes,
    }) as unknown as TokenWithCTIAttrs

  const createMockDictionary = (
    tokens: TokenWithCTIAttrs[] = [],
    breakpoints: Record<string, any> = {},
  ): Dictionary =>
    ({
      allTokens: tokens,
      tokens: { breakpoint: breakpoints },
    }) as unknown as Dictionary

  const createMockOptions = (): Config & LocalOptions =>
    ({}) as unknown as Config & LocalOptions

  it('should generate utility with fallback to default', () => {
    const tokens = [createMockToken({ item: 'sm' })]
    const breakpoints = { sm: { $value: '490px' } }
    const dictionary = createMockDictionary(tokens, breakpoints)
    const options = createMockOptions()

    const result = processTypographyTokens(dictionary, options)

    expect(result).toMatchInlineSnapshot(`
      "@utility typography-* {
        font: --value(--typography-default-*);
        @media screen and (min-width: 490px) {
          font: --value(--typography-sm-*);
        }
      }
      "
    `)
  })

  it('should generate utility with multiple media queries', () => {
    const tokens = [
      createMockToken({ item: 'sm' }),
      createMockToken({ item: 'md' }),
      createMockToken({ item: 'lg' }),
    ]
    const breakpoints = {
      sm: { $value: '490px' },
      md: { $value: '768px' },
      lg: { $value: '1024px' },
    }
    const dictionary = createMockDictionary(tokens, breakpoints)
    const options = createMockOptions()

    const result = processTypographyTokens(dictionary, options)

    expect(result).toMatchInlineSnapshot(`
      "@utility typography-* {
        font: --value(--typography-default-*);
        @media screen and (min-width: 490px) {
          font: --value(--typography-sm-*);
        }
        @media screen and (min-width: 768px) {
          font: --value(--typography-md-*);
        }
        @media screen and (min-width: 1024px) {
          font: --value(--typography-lg-*);
        }
      }
      "
    `)
  })

  it('should handle unordered and sparse breakpoints', () => {
    const tokens = [
      createMockToken({ item: 'lg' }),
      createMockToken({ item: 'sm' }),
    ]
    const breakpoints = {
      sm: { $value: '490px' },
      md: { $value: '768px' }, // This breakpoint is not in the tokens
      lg: { $value: '1024px' },
    }
    const dictionary = createMockDictionary(tokens, breakpoints)
    const options = createMockOptions()

    const result = processTypographyTokens(dictionary, options)

    expect(result).toMatchInlineSnapshot(`
      "@utility typography-* {
        font: --value(--typography-default-*);
        @media screen and (min-width: 490px) {
          font: --value(--typography-sm-*);
        }
        @media screen and (min-width: 1024px) {
          font: --value(--typography-lg-*);
        }
      }
      "
    `)
  })
})