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

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

export function processTypographyTokens(
  dictionary: Dictionary,
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  _options: Config & LocalOptions,
): string {
  const typographyTokens = dictionary.allTokens.filter(
    token => token.$type === 'typography',
  ) as TokenWithCTIAttrs[]

  const breakpoints =
    (dictionary.tokens.breakpoint as BreakpointToken | undefined) ??
    ({} as BreakpointToken)

  const availableBreakpoints = new Set<string>()
  for (const token of typographyTokens) {
    const item = token.attributes.item
    if (item && item !== 'default' && breakpoints[item]) {
      availableBreakpoints.add(item)
    }
  }

  const sortedBreakpoints = [...availableBreakpoints].sort((a, b) => {
    if (!breakpoints[a] || !breakpoints[b]) {
      return 0
    }
    const aValue = (breakpoints[a] as unknown as BreakpointToken).$value
    const bValue = (breakpoints[b] as unknown as BreakpointToken).$value

    return parseFloat(aValue) - parseFloat(bValue)
  })

  let utility = '@utility typography-* {\n'
  utility += '  font: --value(--typography-default-*);\n'

  for (const breakpointName of sortedBreakpoints) {
    const breakpointValue = breakpoints[breakpointName].$value
    utility += `  @media screen and (min-width: ${breakpointValue}) {\n`
    utility += `    font: --value(--typography-${breakpointName}-*);\n`
    utility += '  }\n'
  }

  utility += '}\n'
  return utility
}