import type { UtilityClassBuilder } from "./UtilityClassBuilder.js";

export const gridClasses: UtilityClassBuilder = {
  appliesTo: (token) => token.attributes.category === "grid"
    && token.attributes.type === "columns",
  build(token, dictionary) {
    /*
     * this custom attribute is added for this token type only by the
     * "grid/columns" custom transform defined in config.ts
     */
    const gridTemplateColumns = token.attributes.cssValue;
    const gridColumnClasses = new Array(token.value)
      .fill(null)
      .map((_, index) => `
        .grid-${index + 1} {
          grid-column: span ${index + 1} !important;
        }
      `)
      .join("\n");

    return `
      .grid-root {
        display: grid !important;
        grid-template-columns: ${gridTemplateColumns} !important;
        gap: ${dictionary.tokens.size.grid.gutter.variableReference} !important;
      }
      ${gridColumnClasses}
    `;
  },
};