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

/**
 * @see https://webpack.js.org/plugins/prefetch-plugin/
 */
export default function outputPlugin(config: Configuration, options: Options) {
  const {
    // --- env
    isDev,
    isDevClient,
    isProdClient,
    isServer,
    isClient,
    // @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.
  // @note changed dev in 3.4.0, so now just using var
  // const libraryTarget = isNode ? 'commonjs2' : 'var'
  // const libraryTarget = isServer ? 'commonjs2' : 'umd'
  const libraryTarget = isServer ? 'commonjs2' : 'var'
  // const libraryTarget = 'var'

  const output = {
    // @note made it only give pathinfo in dev
    // Add /* filename */ comments to generated require()s in the output.
    pathinfo: isDev,
    // 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
     * https://github.com/gaearon/react-hot-loader/issues/243#issuecomment-211957140
     * https://github.com/glenjamin/webpack-hot-middleware#config
     *
     * 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
     */
    index.unshift('react-hot-loader/patch')

    // @note - dev webpack is separate now...
    // @note - made it always localhost:3000 which may be a problem
    // const named = isClient ? 'client' : 'server'
    // const DEV_ABSOLUTE_URL =
    //   (process.env.SERVER_URL || 'http://localhost:3000') + webPath
    // const DEV_HMR_URL = `webpack-hot-middleware/client?path=/__webpack_hmr?name=${named}`
    // 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:
    // require.resolve('webpack-dev-server/client') + '?/',
    // require.resolve('webpack/hot/dev-server'),
    index.push(require.resolve('react-dev-utils/webpackHotDevClient'))
  }

  // 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,
  }

  if (bundleSrcFile.includes('client')) {
    entry.main = entry.index
    delete entry.index
  }

  config.entry = entry
  config.output = output

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