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

function buildClasses(item: string, value: string): string {
  return ["margin", "padding"].map((prop) => {
    const p = prop.charAt(0);
    return trim(`
      .${p}-${item} {
        ${prop}: ${value} !important;
      }
      .${p}x-${item} {
        ${prop}-left: ${value} !important;
        ${prop}-right: ${value} !important;
      }
      .${p}y-${item} {
        ${prop}-top: ${value} !important;
        ${prop}-bottom: ${value} !important;
      }
      .${p}t-${item} {
        ${prop}-top: ${value} !important;
      }
      .${p}r-${item} {
        ${prop}-right: ${value} !important;
      }
      .${p}b-${item} {
        ${prop}-bottom: ${value} !important;
      }
      .${p}l-${item} {
        ${prop}-left: ${value} !important;
      }
    `);
  }).join("\n");
}

export const spacingClasses: UtilityClassBuilder = {
  appliesTo: (token) => token.attributes.category === "size"
    && token.attributes.type === "spacing",
  build(token) {
    return buildClasses(token.attributes.item, token.variableReference);
  },

  staticClasses: [["none", "0"], ["auto", "auto"]]
    .map(([item, value]) => buildClasses(item, value)).join("\n"),
};