import { resolve } from 'path'
import log from 'fliplog'
import { resolveToRoot } from '../../config/resolveToRoot'
import { Options, Configuration } from '../../typings'

/**
 * @see https://webpack.js.org/plugins/prefetch-plugin/
 */
export default function outputPlugin(config: Configuration, options: Options) {
  const {
    // --- env
    isDev,
    isDevClient,
    isProdClient,
    isClient,
    isServer,
    // --- computed
    DEV_HMR_URL,
    // @todo @fixme this is the wrong path
    outputPublicPath,
    // --- definition
    bundleConfig,
  } = options

  console.log('[bundling] paths: ', {
    srcEntryFile: bundleConfig.srcEntryFile,
    outputPath: bundleConfig.outputPath,
  })

  // @todo put in env configs...
  const bundleSrcFile = resolveToRoot(bundleConfig.srcEntryFile)
  const outputPath = resolveToRoot(bundleConfig.outputPath)

  /**
   * For our production client bundles we include a hash in the filename.
   * That way we won't hit any browser caching issues when our bundle
   * output changes.
   *
   * @note as we are using the `WebpackMd5Hash` plugin, the hashes will
   * only change when the file contents change. This means we can
   * set very aggressive caching strategies on our bundle output.
   * @see ./env.prod
   *
   * For any other bundle (typically a server/node) bundle we want a
   * determinable output name to allow for easier importing/execution
   * of the bundle by our scripts.
   */
  const filename = isProdClient ? '[name]-[hash].js' : '[name].js'

  // When targetting node we will output our bundle as a commonjs2 module.
  // const libraryTarget = isServer ? 'commonjs2' : 'var'
  const libraryTarget = isServer ? 'commonjs2' : 'umd'

  const output = {
    // Add /* filename */ comments to generated require()s in the output.
    pathinfo: true,
    // Point sourcemap entries to original disk location (format as URL on Windows)
    devtoolModuleFilenameTemplate: info =>
      resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
    // The dir in which our bundle should be output.
    path: outputPath,
    // This does not produce a real file. It's just the virtual path that is
    // served by WebpackDevServer in development. This is the JS bundle
    // containing code from all our entry points, and the Webpack runtime.
    //
    // The filename format for our bundle's entries.
    filename,
    // The name format for any additional chunks produced for the bundle.
    chunkFilename: '[name]-[hash].js',
    /**
     * @see https://github.com/ctrlplusb/react-universally/pull/566#issuecomment-373298187
     * @api https://webpack.js.org/configuration/output/#output-hotupdatechunkfilename
     */
    hotUpdateChunkFilename: '[hash].hot-update.js',
    libraryTarget,
    publicPath: outputPublicPath,

    /**
     * @see https://stackoverflow.com/questions/49111086/webpack-4-universal-library-target
     * this is here to fix hmr universally
     */
    globalObject: 'this',
  }

  const index = []

  // Extends hot reloading with the ability to hot path React Components.
  // This should always be at the top of your entries list. Only put
  // polyfills above it.
  if (isDevClient && process.env.IS_HMR_ENABLED) {
    console.log('WEBPACK HOT LOADER IS LOADED ========= [R.I.P.]')

    // https://github.com/facebook/react/issues/10441#issuecomment-321913131
    // index.unshift('stack-source-map/register')
    if (Boolean(process.env.CI) !== true) {
      log.cyan('IS_DEV_CLIENT_WITH_HMR').echo()
    }

    // DIE
    // index.push('webpack-hot-middleware/client')
    // ^ this is the same as DEV_HMR_URL but devhmrurl has reload=true and putting this here DISABLES that
    // https://github.com/gaearon/react-hot-loader/issues/243#issuecomment-211957140
    // https://github.com/glenjamin/webpack-hot-middleware#config
    index.unshift('react-hot-loader/patch')

    // Required to support hot reloading of our client.
    // index.push(DEV_HMR_URL)

    // Include an alternative client for WebpackDevServer. A client's job is to
    // connect to WebpackDevServer by a socket and get notified about changes.
    // When you save a file, the client will either apply hot updates (in case
    // of CSS changes), or refresh the page (in case of JS changes). When you
    // make a syntax error, this client will display a syntax error overlay.
    // Note: instead of the default WebpackDevServer client, we use a custom one
    // to bring better experience for Create React App users. You can replace
    // the line below with these two lines if you prefer the stock client:
    const one = require.resolve('webpack-dev-server/client') + '?/'
    const two = require.resolve('webpack/hot/dev-server')
    // require.resolve('react-dev-utils/webpackHotDevClient')
    index.unshift(one)
    index.unshift(two)

    // bundle the client for hot reloading
    // only- means to only hot reload for successful updates
    // index.push('webpack/hot/only-dev-server')
  }

  // >>>>>>>>>>>>>>>> vvvvvvvv <<<<<<<<<<<<<<<<<<<<<<<<<
  // @todo - need to code split vendors at minimum here

  // The source entry file for the bundle.
  index.push(bundleSrcFile)

  const entry = {
    // We name our entry files "index" as it makes it easier for us to
    // import bundle output files (e.g. `import server from './build/server';`)
    //
    // @note
    // not sure if this ever happens except on server....
    index,
  }

  // !!!!!!!!!!!!!!!!!!!! note, src file does not contain this anymore
  if (bundleSrcFile.includes('client')) {
    // annoying, for some reason, the output json is in a different order!
    // entry.vendor = pkg.bundledDependencies
    // ^ currently disabling to debug
    // console.warn('___DISABLED_VENDOR')

    entry.main = entry.index
    delete entry.index
  } else {
    // console.warn('__NOT_CLIENT')
  }

  config.entry = entry
  config.output = output

  config.name = isClient ? 'client' : 'server'
}