const fs = require('fs');
const colors = require('../app/theme/colors.js');

const flattenColors = (colors) => {
  let flatColors = {};
  for (const [key, value] of Object.entries(colors)) {
    if (typeof value === 'object' && value !== null && key !== 'dark') {
      for (const [nestedKey, nestedValue] of Object.entries(value)) {
        flatColors[`${key}-${nestedKey}`] = `${key}-${nestedKey}`;
      }
    } else if (key !== 'dark') {
      flatColors[key] = key;
    }
  }
  return flatColors;
};

const flatColors = flattenColors(colors);

const generatedCSS = `/* Auto-generated, DO NOT EDIT */
/* Uses CSS variables (--color-*) generated by Tailwind config */

/* fill */
${Object.entries(flatColors).map(([name, key]) => `.fill-${name.replace(/ /g, '-')} { fill: var(--color-${key.replace(/ /g, '-')}) }`).join('\n')}
${Object.entries(flatColors).map(([name, key]) => `.hover-fill-${name.replace(/ /g, '-')}:hover svg { fill: var(--color-${key.replace(/ /g, '-')}) }`).join('\n')}

/* color */
${Object.entries(flatColors).map(([name, key]) => `.color-${name.replace(/ /g, '-')} { color: var(--color-${key.replace(/ /g, '-')}) }`).join('\n')}

/* hover color */
${Object.entries(flatColors).map(([name, key]) => `.hover-${name.replace(/ /g, '-')}:hover { color: var(--color-${key.replace(/ /g, '-')}) }`).join('\n')}

/* border color */
${Object.entries(flatColors).map(([name, key]) => `.border-${name.replace(/ /g, '-')} { border-color: var(--color-${key.replace(/ /g, '-')}) }`).join('\n')}

/* background color */
${Object.entries(flatColors).map(([name, key]) => `.bg-${name.replace(/ /g, '-')} { background-color: var(--color-${key.replace(/ /g, '-')}) }`).join('\n')}
`;

// Write the generated CSS to a file
fs.writeFileSync('app/styles/colors-autogen.css', generatedCSS);