import StyleDictionary from 'style-dictionary';
import { register } from '@tokens-studio/sd-transforms';
import {
  typescriptAppFormat,
  cssBreakpointWebFormat,
  ssrWebFormat,
} from './utils/styleDictionaryFormats.js';
import {
  getStyleDictionaryConfig,
  getStyleDictionaryBreakpointConfig,
} from './utils/styleDictionaryConfig.js';
import {
  BRANDS,
  PLATFORMS,
  BREAKPOINT_PLATFORMS,
  THEMES,
  BREAKPOINTS,
  COMPONENT,
} from './utils/constants.js';

import {
  isBreakpointFilter,
  generateReadyFilter,
  generateSSRReadyFilter,
  colorOnlyFilter,
  radiusOnlyFilter,
  borderOnlyFilter,
  breakpointOnlyFilter,
  textOnlyFilter,
  fontFamilyOnlyFilter,
  opacityOnlyFilter,
  shadowOnlyFilter,
  paddingOnlyFilter,
  spaceOnlyFilter,
  effectsOnlyFilter,
} from './utils/styleDictionaryFilters.js';

import {
  rgbToHexTransform,
  numberToPixelsTransform,
  typescriptNumberToPixelsTransform,
  fontSizeToRems,
  letterSpacingToRems,
  lineHeightToRems,
  shadowToCssTransform,
} from './utils/styleDictionaryTransforms.js';

register(StyleDictionary, {
  platform: 'css',
  name: 'tokens-studio',
  'ts/color/modifiers': {
    format: 'hex',
  },
});

// Custom transforms
StyleDictionary.registerTransform(numberToPixelsTransform);
StyleDictionary.registerTransform(typescriptNumberToPixelsTransform);
StyleDictionary.registerTransform(rgbToHexTransform);
StyleDictionary.registerTransform(fontSizeToRems);
StyleDictionary.registerTransform(letterSpacingToRems);
StyleDictionary.registerTransform(lineHeightToRems);
StyleDictionary.registerTransform(shadowToCssTransform);
// Custom filters
StyleDictionary.registerFilter(generateReadyFilter);
StyleDictionary.registerFilter(generateSSRReadyFilter);
StyleDictionary.registerFilter(isBreakpointFilter);
StyleDictionary.registerFilter(colorOnlyFilter);
StyleDictionary.registerFilter(radiusOnlyFilter);
StyleDictionary.registerFilter(borderOnlyFilter);
StyleDictionary.registerFilter(breakpointOnlyFilter);
StyleDictionary.registerFilter(textOnlyFilter);
StyleDictionary.registerFilter(fontFamilyOnlyFilter);
StyleDictionary.registerFilter(opacityOnlyFilter);
StyleDictionary.registerFilter(shadowOnlyFilter);
StyleDictionary.registerFilter(paddingOnlyFilter);
StyleDictionary.registerFilter(spaceOnlyFilter);
StyleDictionary.registerFilter(effectsOnlyFilter);

// Custom formats
StyleDictionary.registerFormat(typescriptAppFormat);
StyleDictionary.registerFormat(cssBreakpointWebFormat);
StyleDictionary.registerFormat(ssrWebFormat);

console.log('Build started...');

// Process the design tokens for the different brands and platforms
BRANDS.forEach((brand) => {
  PLATFORMS.forEach((platform) => {
    COMPONENT.forEach((component) => {
      THEMES.forEach((theme) => {
        console.log('\n==============================================');
        console.log(
          `\nProcessing: [${platform}] [${brand}] [${theme}] [${component}]`,
        );

        /*
         * Uncomment to display logs
         */
        // function generateConfigWithLogs(brand: string, theme: string, component: string) {
        //   const existingConfig = getStyleDictionaryConfig(brand, theme, component);

        //   // Add logging configuration to the existing configuration.
        //   (existingConfig as any).log = {
        //     warnings: 'warn',
        //     verbosity: 'verbose',
        //     errors: {
        //       brokenReferences: 'throw',
        //     },
        //   };

        //   return existingConfig;
        // }
        // const sd = new StyleDictionary(generateConfigWithLogs(brand, theme, component), );

        const sd = new StyleDictionary(
          getStyleDictionaryConfig(brand, theme, component),
        );
        sd.buildPlatform(platform);

        if (BREAKPOINT_PLATFORMS.includes(platform)) {
          BREAKPOINTS.forEach((breakpoint) => {
            console.log('\n==============================================');
            console.log(
              `\nProcessing:  [${brand}] [${theme}] [${breakpoint}] [${platform}]`,
            );

            // Generate variables for breakpoint css files
            const sd1 = new StyleDictionary(
              getStyleDictionaryBreakpointConfig(brand, theme, breakpoint),
            );
            sd1.buildPlatform(platform);

            console.log('\nEnd processing');
          });
        }

        console.log('\nEnd processing');
      });
    });
  });
});

console.log('\n==============================================');
console.log('\nBuild completed!');