import { ProgressPlugin } from 'webpack'

let prevName
let spinner
// let spinner
// const scoped = {
//   prevName: undefined,
//   get spinner() {
//     spinner = spinner || ora('building').start()
//     return spinner
//   }
// }
if (process.env.LOG_BUILD_PROGRESS) {
  const log = require('fliplog')
  const ora = log.requirePkg('ora')
  spinner = ora('building').start()
}

function toSpinnerColor(rounded) {
  switch (true) {
    case rounded <= 50:
      return 'grey'
    case rounded <= 70:
      return 'yellow'
    case rounded >= 70:
      return 'cyan'
    case rounded >= 90:
      return 'grey'
  }
}

let spinnerTimeoutId

export default function metaPlugin(config, options) {
  const { isClient, isNode, isAnalyze } = options
  const name = isClient ? '[web]' : '[server]'
  const logName = prevName !== name ? name : undefined
  prevName = name
  console.log('\n\n\n')

  /**
   * @see https://stackoverflow.com/questions/31052991/webpack-progress-using-node-js-api
   * @description logs the progress when building
   * @todo spinner?
   */
  const progressConfig = (percentage, msg) => {
    // log name when it changes

    const rounded = percentage * 100
    const text = rounded + '%' + ' ' + msg + ' ' + name

    spinner.color = toSpinnerColor(rounded)
    spinner.text = text

    if (logName) {
      spinner.text = logName + ' ' + text
    }

    clearTimeout(spinnerTimeoutId)
    spinnerTimeoutId = setTimeout(() => {
      console.log('\n\n\n')
      spinner.stopAndPersist({ text: 'built!' })
      console.log('\n\n\n')
    }, process.env.NODE_ENV === 'production' ? 20000 : 1000)

    // if (percentage >= 100) {
    //   // setTimeout(() => {
    //   //   console.log('\n\n\n')
    //   //   spinner.stopAndPersist({ text: 'built!' })
    //   //   console.log('\n\n\n')
    //   // }, 100)
    // }
    // console.log((percentage * 100) + '%', msg, name)
  }

  if (process.env.LOG_BUILD_PROGRESS) {
    const progressPlugin = new ProgressPlugin(progressConfig)
    config.plugins.push(progressPlugin)
  }
}