const ModPackage = require('./ModPackage')
const constants = require('./util/constants.json'),
      promisify = require('./util/promisify')

const create = (name, ...children) => {
  let classList = name.split('.')
      ele = document.createElement(classList.shift() || 'div')

  if(classList)
    ele.classList = classList.join(' ')

  children.forEach(child =>
    typeof(child) == 'string' ? ele.innerText += child : ele.appendChild(child)
  )

  return ele
}

const openAsync = promisify($file.open)

class Launcher {
  constructor(app) {
    const self = this

    const options = {
      title: 'Xash3D Launcher',
      // html: app.bundle.openSync('./launcher.html', 'String'),
      bodyClass: 'skin_inset xash3d_launcher',
      width: 350,
      height: 400,
      // onready() {
      //   const { iframe } = launcher.el,
      //         win = iframe.contentWindow

      //   win.app = self
      //   handleIframe(iframe)
      // },
      // TODO: move to actual mods folder
      onready() {
        console.log(this)
        self.modList = this.el.body.appendChild(create('ul') )
        self.loadMods()
      },
      footer: `
        <span style="display: inline-block; color: #555; padding: 3px 1px;">
          v${app.version}
        </span>
        <span style="float: right">
          <button onclick="$exe('${constants.paths.modPath}')">Open Mods Folder</button>
        </span>
      `
    }

    this.app = app
    this.window = $window(options)
  }

  async loadMods() {
    let { modPath } = constants.paths,
        files = $io.obj.getPath(window.le._files, modPath, '/'),
        out = []
      
    console.log(files)

    if(files) {
      for(let name in files)
        if(files[name] == 0 && $fs.utils.getExt(name) == 'asar') {
          let path = modPath + name,
              promise = openAsync(path, 'ArrayBuffer')
                .then(async buffer => ({
                  name,
                  path,
                  size: buffer.byteLength,
                  manifest: await ModPackage.unpack(buffer, true)
                    .then(data => JSON.parse(data.manifestString) )
                }))

          out.push(promise)
        }
    }

    out = await Promise.all(out)
    out
      .map(mod => this.renderMod(mod))
      .map(ele => this.modList.appendChild(ele) )
  }

  renderMod(mod) {
    // const mod = document.createElement('div'),
    //       header = document.createElement('header'),
    //       info = document.createElement('div')
    //       modName = document.createElement('h5'),
    //       modInfo = document.createElement('span'),
    //       launch = document.createElement('div')

    // header.appendChild(modName)
    // header.appendChild(modInfo)
    // mod.appendChild('header')

    let self = this,
        launch,
        element = create('.mod.skin_outset',
          create('header',
            create('.info',
              create('h5', mod.manifest.name),
              create('span', `${mod.name} | ${parseInt(mod.size / 1_000_000)}mb`)
            ),
            launch = create('.launch')
          )
        )

    launch.onclick = () => {
      self.app.launch(mod.path)
      self.window.destroy()
    }

    return element
  }
}

module.exports = Launcher