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

/*
convert each grid token inside `grid` category to a tailwindcss utility. Each grid token has structure:
grid > {identifier} > {breakpoint} > $value

for each grid token, compile all its tokens into a single utility:

```css
@utility grid-{identifier} {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns--default), 1fr);
  grid-gap: var(--grid-gutter--default);
  margin: 0 var(--grid-margin--default);
  @media screen and (min-width: {breakpoint}) {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns--{breakpoint}), 1fr);
    grid-gap: var(--grid-gutter--{breakpoint});
    margin: 0 var(--grid-margin--{breakpoint});
  }
}
```
Append prefix to the utility name if it is provided.
*/
export function processGridTokens(
  dictionary: Dictionary,
  options: Config & LocalOptions,
): string {
  const gridTokens = dictionary.tokens.grid ?? {}
  const breakpointTokens = dictionary.tokens.breakpoint ?? {}

  if (Object.keys(gridTokens).length === 0) {
    return ''
  }

  const utilities = []
  for (const [identifier, breakpoints] of Object.entries(gridTokens)) {
    const utilityName = `grid-${identifier}`
    const variableBase = options.prefix
      ? `--${options.prefix}-grid-${identifier}`
      : `--grid-${identifier}`
    let utility = `@utility ${utilityName} {\n`
    utility += `  display: grid;\n`
    utility += `  grid-template-columns: repeat(var(${variableBase}-columns--default), 1fr);\n`
    utility += `  grid-gap: var(${variableBase}-gutter--default);\n`
    utility += `  margin: 0 var(${variableBase}-margin--default);\n`

    for (const [breakpoint] of Object.entries(breakpoints)) {
      const breakpointToken = breakpointTokens[breakpoint]
      if (!breakpointToken || breakpoint === 'default') {
        continue
      }
      utility += `  @media screen and (min-width: ${breakpointToken.$value}) {\n`
      utility += `    grid-template-columns: repeat(var(${variableBase}-columns--${breakpoint}), 1fr);\n`
      utility += `    grid-gap: var(${variableBase}-gutter--${breakpoint});\n`
      utility += `    margin: 0 var(${variableBase}-margin--${breakpoint});\n`
      utility += `  }\n`
    }
    utility += `}\n`
    utilities.push(utility)
  }

  return utilities.join('\n')
}