const path = require('path');
const CSSSplitWebpackPlugin = require('css-split-webpack-plugin').default;
const OfflinePlugin = require('@yesmeck/offline-plugin');
const replaceLib = require('antd-tools/lib/replaceLib');
const webpack = require('webpack');
const WebpackBar = require('webpackbar');
const getExternalResources = require('./getExternalResources');

const isDev = process.env.NODE_ENV === 'development';
const usePreact = process.env.REACT_ENV === 'preact';

function alertBabelConfig(rules) {
  rules.forEach((rule) => {
    if (rule.loader && rule.loader === 'babel-loader') {
      if (rule.options.plugins.indexOf(replaceLib) === -1) {
        rule.options.plugins.push(replaceLib);
      }
      rule.options.plugins = rule.options.plugins.filter(plugin => (
        !plugin.indexOf || plugin.indexOf('babel-plugin-add-module-exports') === -1
      ));
    } else if (rule.use) {
      alertBabelConfig(rule.use);
    }
  });
}

function getBabelConfig(rules) {
  let config = null;
  rules.forEach((rule) => {
    if (config) {
      return;
    }
    if (rule.loader && rule.loader === 'babel-loader') {
      config = rule.options;
      return;
    }
    if (rule.use) {
      alertBabelConfig(rule.use);
    }
  });
  return config;
}

function usePrettyWebpackBar(config) {
  // remove old progress plugin.
  config.plugins = config.plugins
    .filter((plugin) => {
      return !(plugin instanceof webpack.ProgressPlugin)
        && !(plugin instanceof WebpackBar);
    });

  // use brand new progress bar.
  config.plugins.push(
    new WebpackBar({
      name: '📦  Site',
      minimal: false,
    })
  );
}

module.exports = {
  port: 8001,
  source: {
    components: './components',
    docs: './docs',
    changelog: [
      'CHANGELOG.zh-CN.md',
      'CHANGELOG.en-US.md',
    ],
  },
  theme: './site/theme',
  htmlTemplate: './site/theme/static/template.html',
  themeConfig: {
    categoryOrder: {
      'Ant Design': 0,
      原则: 1,
      Principles: 1,
      视觉: 2,
      Visual: 2,
      模式: 3,
      Patterns: 3,
      其他: 6,
      Other: 6,
      Components: 100,
    },
    typeOrder: {
      General: 0,
      Layout: 1,
      Navigation: 2,
      'Data Entry': 3,
      'Data Display': 4,
      Feedback: 5,
      Localization: 6,
      Other: 7,
    },
    docVersions: {
      '0.9.x': 'http://09x.ant.design',
      '0.10.x': 'http://010x.ant.design',
      '0.11.x': 'http://011x.ant.design',
      '0.12.x': 'http://012x.ant.design',
      '1.x': 'http://1x.ant.design',
      '2.x': 'http://2x.ant.design',
    },
  },
  filePathMapper(filePath) {
    if (filePath === '/index.html') {
      return ['/index.html', '/index-cn.html'];
    }
    if (filePath.endsWith('/index.html')) {
      return [filePath, filePath.replace(/\/index\.html$/, '-cn/index.html')];
    }
    if (filePath !== '/404.html' && filePath !== '/index-cn.html') {
      return [filePath, filePath.replace(/\.html$/, '-cn.html')];
    }
    return filePath;
  },
  doraConfig: {
    verbose: true,
    plugins: ['dora-plugin-upload'],
  },
  webpackConfig(config) {
    config.resolve.alias = {
      'antd/lib': path.join(process.cwd(), 'components'),
      'antd/es': path.join(process.cwd(), 'components'),
      antd: path.join(process.cwd(), 'index'),
      site: path.join(process.cwd(), 'site'),
      'react-router': 'react-router/umd/ReactRouter',
    };

    config.externals = {
      'react-router-dom': 'ReactRouterDOM',
    };

    if (usePreact) {
      config.resolve.alias = Object.assign({}, config.resolve.alias, {
        react: 'preact-compat',
        'react-dom': 'preact-compat',
        'create-react-class': 'preact-compat/lib/create-react-class',
        'react-router': 'react-router',
      });
    }

    if (isDev) {
      config.devtool = 'source-map';
    }

    alertBabelConfig(config.module.rules);
    usePrettyWebpackBar(config);

    const babelConfig = getBabelConfig(config.module.rules);
    if (babelConfig) {
      config.module.rules = config.module.rules.filter((rule) => {
        return rule.test.toString() !== /\.svg(\?v=\d+\.\d+\.\d+)?$/.toString();
      });
      config.module.rules.push(
        {
          test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
          issuer: {
            test: /\.md$/,
          },
          use: [
            {
              loader: 'babel-loader',
              options: babelConfig,
            },
            {
              loader: '@svgr/webpack',
              options: {
                babel: false,
                ref: true,
              },
            },
          ],
        },
        {
          test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
          issuer: {
            test: /\.css$/,
          },
          loader: 'url-loader?limit=10000&mimetype=image/svg+xml',
        }
      );
    }
    config.plugins.push(
      new CSSSplitWebpackPlugin({ size: 4000 }),
      new OfflinePlugin({
        appShell: '/app-shell',
        caches: {
          main: [':rest:'],
          additional: [':externals:'],
        },
        externals: [
          '/app-shell',
          'https://at.alicdn.com/t/font_148784_v4ggb6wrjmkotj4i.woff',
          'https://at.alicdn.com/t/font_148784_v4ggb6wrjmkotj4i.eot',
          'https://at.alicdn.com/t/font_148784_v4ggb6wrjmkotj4i.svg',
          'https://at.alicdn.com/t/font_148784_v4ggb6wrjmkotj4i.ttf',
        ].concat(getExternalResources()),
        responseStrategy: 'network-first',
        safeToUseOptionalCaches: true,
        ServiceWorker: {
          events: true,
        },
        AppCache: false,
      }),
    );

    return config;
  },

  htmlTemplateExtraData: {
    isDev,
    usePreact,
  },
};