import { transformSync } from '@babel/core'
import babelPluginreactCssModules from 'babel-plugin-react-css-modules'
import path, { resolve } from 'node:path'
import fs from 'node:fs'
import { fileURLToPath } from 'url'
const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)

function reactCssModule(config) {
  console.log('reactCssModule')
  console.log(resolve(__dirname, 'trans.js'))
  return {
    name: 'custom-react-css-module',
    transform(code, id) {
      if (!/\.(t|j)sx?$/.test(id) || id.includes('node_modules'))
        return

      if (!id.endsWith('x') && !code.includes('react'))
        return

      const parserPlugins = ['jsx', 'importMeta']

      if (/\.tsx?$/.test(id))
        parserPlugins.push('typescript', 'decorators-legacy')


      const isReasonReact = id.endsWith('.bs.js')

      const result = transformSync(code, {
        babelrc: false,
        configFile: false,
        filename: id,
        parserOpts: {},
        plugins: [
          [babelPluginreactCssModules, {
            autoResolveMultipleImports: true,
            exclude: 'node_modules',
            ...config
          }]
        ],
        ast: !isReasonReact,
        sourceMaps: true,
        sourceFileName: id,
      })

           
      fs.writeFileSync(resolve(__dirname, 'trans.js'), result.code)


      return {
        code: result.code,
        map: result.map
      }
            
    }
  }
}

export default reactCssModule