import AssetsPlugin from 'assets-webpack-plugin'
import { Options as AssetsPluginOptions } from 'assets-webpack-plugin'
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, bundleConfig, outputPublicPath } = options

  const bundleAssetsTypes = bundleAssetTypes.join('|')

  const clientAssetsConfig: AssetsPluginOptions = {
    prettyPrint: true,
    includeManifest: true,
    filename: process.env.BUNDLE_ASSETS_FILE_NAME || 'assets.json',
    path:
      process.env.BUNDLE_ASSETS_OUTPUT_PATH ||
      resolveToRoot(bundleConfig.outputPath),

    // need to filter this out
    // metadata: {
    //   isLatest: true,
    // },
  }

  console.log({ clientAssetsConfig })

  // 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: outputPublicPath,
      // 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.

  const clientAssets = new AssetsPlugin(clientAssetsConfig)
  config.plugins.push(clientAssets)
}