const fs = require('fs');
const path = require('path');

// 从本地文件读取CSS
const cssFilePath = path.resolve(__dirname, 'style.css');
const css = fs.readFileSync(cssFilePath, 'utf-8');

// 用于存储变量及其值的对象
const cssVariables = {};

// 正则表达式用于匹配CSS变量及其值
const cssVarRegex = /--\w+[^:]*:\s*([^;]*);/g;
const cssVarReferenceRegex = /var\((--\w+)\)/g;

// 解析CSS变量及其值
let match;
while ((match = cssVarRegex.exec(css))) {
  const variable = match[0].split(':')[0].trim();
  const value = match[1].trim();
  cssVariables[variable] = value;
}

// 对变量进行排序，确保被引用的变量在引用它的变量之前
const sortedVariables = Object.keys(cssVariables);

// 按类别对变量进行分组
const groups = {
  colors: [],
  typography: [],
  spacing: [],
  border: [],
  boxShadow: [],
  body: [],
  block: [],
  panel: [],
  button: [],
  checkbox: [],
  input: [],
  table: [],
  other: [],
};

sortedVariables.forEach((variable) => {
  const value = cssVariables[variable];
  const isColor =
    value.startsWith('#') ||
    value.includes('rgb') ||
    value.includes('color') ||
    variable.includes('color') ||
    variable.includes('fill') ||
    variable.includes('neutral');
  const isTypography =
    variable.includes('text') ||
    variable.includes('font') ||
    variable.includes('prose') ||
    variable.includes('link');
  const isSpacing =
    variable.includes('spacing') ||
    variable.includes('padding') ||
    variable.includes('gap') ||
    variable.includes('margin');
  value.includes('padding') || value.includes('margin');
  const isBorder = variable.includes('radius') || variable.includes('border');
  const isBoxShadow = variable.includes('shadow');
  if (variable.includes('--body')) {
    groups.body.push(variable);
  } else if (variable.includes('--block')) {
    groups.block.push(variable);
  } else if (variable.includes('--panel')) {
    groups.panel.push(variable);
  } else if (variable.includes('--button')) {
    groups.button.push(variable);
  } else if (variable.includes('--checkbox')) {
    groups.checkbox.push(variable);
  } else if (variable.includes('--input')) {
    groups.input.push(variable);
  } else if (variable.includes('--table')) {
    groups.table.push(variable);
  } else if (isBorder) {
    groups.border.push(variable);
  } else if (isBoxShadow) {
    groups.boxShadow.push(variable);
  } else if (isColor) {
    groups.colors.push(variable);
  } else if (isTypography) {
    groups.typography.push(variable);
  } else if (isSpacing) {
    groups.spacing.push(variable);
  } else {
    groups.other.push(variable);
  }
});

// 生成排序后的CSS变量
const generateGroupCss = (groupName) => {
  const cache = groups[groupName].map(
    (variable) => `${variable}: ${cssVariables[variable]};`,
  );
  const firstPart = cache.filter((item) => item.includes('var'));
  const secondPart = cache.filter((item) => !item.includes('var'));
  return [...secondPart, ...firstPart].join('\n');
};

const sortedCss =
  '#output {\n' +
  `/* Colors */\n` +
  generateGroupCss('colors') +
  `\n\n/* Typography */\n` +
  generateGroupCss('typography') +
  `\n\n/* Spacing */\n` +
  generateGroupCss('spacing') +
  `\n\n/* Border */\n` +
  generateGroupCss('border') +
  `\n\n/* BoxShadow */\n` +
  generateGroupCss('boxShadow') +
  `\n\n/* Body */\n` +
  generateGroupCss('body') +
  `\n\n/* Block */\n` +
  generateGroupCss('block') +
  `\n\n/* Panel */\n` +
  generateGroupCss('panel') +
  `\n\n/* Button */\n` +
  generateGroupCss('button') +
  `\n\n/* Checkbox */\n` +
  generateGroupCss('checkbox') +
  `\n\n/* Input */\n` +
  generateGroupCss('input') +
  `\n\n/* Table */\n` +
  generateGroupCss('table') +
  `\n\n/* Other */\n` +
  generateGroupCss('other') +
  '}';

console.log(sortedCss);

// 将排序后的CSS变量写入文件
fs.writeFileSync('sorted-css-variables.css', sortedCss);