import AssetsPlugin from 'assets-webpack-plugin'
import log from 'fliplog'
import { resolveToRoot } from '../../resolveToRoot'
import { Configuration, Options } from '../../typings'

const urlLoader = {
  test: /\.(png|jpe?g|svg|woff2?|ttf|eot)$/,
  loader: 'url-loader?limit=8000',
}

// Additional asset types to be supported for our bundles.
// i.e. you can import the following file types within your source and the
// webpack bundling process will bundle them with your source and create
// URLs for them that can be resolved at runtime.
const bundleAssetTypes = [
  'jpg',
  'jpeg',
  'png',
  'gif',
  'ico',
  'eot',
  'svg',
  'ttf',
  'woff',
  'woff2',
  'otf',
]

export default function assetPlugin(config: Configuration, options: Options) {
  const {
    isProd,
    isServer,
    isClient,
    // ------- >>>>> REMOVE THESE
    bundleConfig,
    clientServerPublicPath,
    outputPublicPath,
  } = options

  const bundleAssetsTypes = bundleAssetTypes.join('|')

  const clientAssetsConfig = {
    filename: process.env.BUNDLE_ASSETS_FILE_NAME,
    path: resolveToRoot(bundleConfig.outputPath),
  }

  log
    .bold('IS_CLIENT_ASSETS')
    .data(
      isClient
        ? clientAssetsConfig.path + '/' + clientAssetsConfig.filename
        : false
    )
    .echo()

  // ASSETS (Images/Fonts/etc)
  // This is bound to our server/client bundles as we only expect to be
  // serving the client bundle as a Single Page Application through the
  // server.
  // ifElse(isClient || isServer)(() => (
  const assetsLoader = {
    test: new RegExp(`\\.(${bundleAssetsTypes})$`, 'i'),
    loader: 'file-loader',
    query: {
      // What is the web path that the client bundle will be served from?
      // The same value has to be used for both the client and the
      // server bundles in order to ensure that SSR paths match the
      // paths used on the client.
      //
      // When running in dev mode the client bundle runs on a
      // seperate port so we need to put an absolute path here.
      // Otherwise we just use the configured web path for the client.
      publicPath: clientServerPublicPath,
      // We only emit files when building a web bundle, for the server
      // bundle we only care about the file loader being able to create
      // the correct asset URLs.
      emitFile: isClient,
    },
  }

  config.module.rules.push(assetsLoader)

  // Generates a JSON file containing a map of all the output files for
  // our webpack bundle.  A necessisty for our server rendering process
  // as we need to interogate these files in order to know what JS/CSS
  // we need to inject into our HTML. We only need to know the assets for
  // our client bundle.

  // if (isClient) {
  /**
   * @todo !!!!! @michael - code split etc
   */
  const clientAssets = new AssetsPlugin(clientAssetsConfig)
  config.plugins.push(clientAssets)
  // }
}