import { Application } from '../../src'
import { ExampleSystem } from './example-system'
import pako from 'pako'
import vcControl from './vcControl'
import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter'
const el: any = document.getElementById('app')

const app = new Application(el)
app.start()

const system = new ExampleSystem()
app.addSystem(system)

// const init = async () => {
vcControl.proxyUrl = '/api'
// }

document.getElementById('rotate1')?.addEventListener('click', () => {
  const { EventManager } = app
  EventManager.publish('rotate', 0)
})

document.getElementById('rotate2')?.addEventListener('click', () => {
  const { EventManager } = app
  EventManager.publish('rotate', 1)
})

document.getElementById('rotate3')?.addEventListener('click', () => {
  const { EventManager } = app
  EventManager.publish('rotate', 2)
})

document.getElementById('rotate4')?.addEventListener('click', () => {
  const { EventManager } = app
  EventManager.publish('rotate', 3)
})

document.getElementById('rotate5')?.addEventListener('click', () => {
  const { EventManager } = app
  EventManager.publish('rotate', 4)
})

document.getElementById('rotate6')?.addEventListener('click', () => {
  const { EventManager } = app
  EventManager.publish('rotate', 5)
})

document.getElementById('reset1')?.addEventListener('click', () => {
  const { EventManager } = app
  EventManager.publish('reset', 0)
})

document.getElementById('reset2')?.addEventListener('click', () => {
  const { EventManager } = app
  EventManager.publish('reset', 1)
})

document.getElementById('reset3')?.addEventListener('click', () => {
  const { EventManager } = app
  EventManager.publish('reset', 2)
})

document.getElementById('reset4')?.addEventListener('click', () => {
  const { EventManager } = app
  EventManager.publish('reset', 3)
})

document.getElementById('reset5')?.addEventListener('click', () => {
  const { EventManager } = app
  EventManager.publish('reset', 4)
})

document.getElementById('reset6')?.addEventListener('click', () => {
  const { EventManager } = app
  EventManager.publish('reset', 5)
})

document.getElementById('fix')?.addEventListener('click', () => {
  const { EventManager } = app
  EventManager.publish('fix')
})

function arrayBufferToBase64(arrayBuffer) {
  var binaryString = ''
  for (var i = 0; i < arrayBuffer.length; i++) {
    binaryString += String.fromCharCode(arrayBuffer[i])
  }
  var base64String = btoa(binaryString)
  return base64String
}

const saveModeToPako = async (model, name) => {
  const compressed = pako.deflate(JSON.stringify(model))

  //   const str = arrayBufferToBase64(compressed)

  // 将Uint8Array数据写入Blob对象
  const blob = new Blob([compressed])

  // 生成下载链接
  const url = URL.createObjectURL(blob)

  // 创建一个隐藏的a标签
  const a = document.createElement('a')
  a.style.display = 'none'
  a.href = url
  a.download = `${name}.pako` // 设置下载文件的名称

  // 将a标签添加到页面中
  document.body.appendChild(a)

  // 模拟点击a标签进行下载
  a.click()

  // 释放URL对象
  URL.revokeObjectURL(url)
}

const saveModeToBase64 = async (model, name) => {
  const compressed = pako.deflate(JSON.stringify(model))

  const str = arrayBufferToBase64(compressed)

  // 将Uint8Array数据写入Blob对象
  const blob = new Blob([str])

  // 生成下载链接
  const url = URL.createObjectURL(blob)

  // 创建一个隐藏的a标签
  const a = document.createElement('a')
  a.style.display = 'none'
  a.href = url
  a.download = `${name}.base64` // 设置下载文件的名称

  // 将a标签添加到页面中
  document.body.appendChild(a)

  // 模拟点击a标签进行下载
  a.click()

  // 释放URL对象
  URL.revokeObjectURL(url)
}

function downloadGLB(model) {
  const exporter = new GLTFExporter()

  const options = {
    trs: true, // 是否保留位置、旋转、缩放信息
    animations: [], // 导出的动画
    binary: true, // 是否以二进制格式输出
    embedImages: true, //是否嵌入贴图
    onlyVisible: true, //是否只导出可见物体
    forcePowerOfTwoTextures: true,
    includeCustomMaterials: true, //指定是否包含自定义材质
    includeCustomAttributes: true, //   指定是否包含自定义属性
    includeCustomTextures: true, // 指定是否包含自定义纹理
    includeCustomSamplers: true, // 指定是否包含自定义采样器
    includeCustomImages: true, //   指定是否包含自定义图像
    includeCustomTechniques: true, //   指定是否包含自定义技术
    includeCustomMaterialsCommon: true, //指定是否包含自定义 MaterialsCommon
    includeCustomMeshes: true, //指定是否包含自定义网格
    includeCustomSkins: true, //指定是否包含自定义皮肤
    includeCustomNodes: true, // 指定是否包含自定义节点
    includeCustomGeometries: true, //指定是否包含自定义几何体
    includeCustomPrograms: true, // 指定是否包含自定义程序
    includeCustomShaders: true, //指定是否包含自定义着色器
    includeCustomExtensions: true //指定是否包含自定义扩展。如果设置为true，则会包含在导出中定义的自定义GLTF扩展
  }

  exporter.parse(
    model,
    (result) => {
      // 处理导出结果
      const blob = new Blob([result], { type: 'application/octet-stream' })
      const url = URL.createObjectURL(blob)

      const link = document.createElement('a')
      link.href = url
      link.download = 'model.glb'
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    },
    (err) => {
      console.error(err)
    },
    options
  )
}

// document.getElementById('generate')?.addEventListener('click', () => {
//   const { SystemManager, EntityManager } = app
//   const model = (SystemManager.getSystem(ExampleSystem) as any).fixObject.clone()
//   model.position.set(0, 0, 0)
//   saveModeToPako(model, 'cr20')
//   saveModeToBase64(model, 'cr20')
//   downloadGLB(model)
// })

document.getElementById('generate')?.addEventListener('click', () => {
  const { SystemManager, EntityManager } = app
  const model = (SystemManager.getSystem(ExampleSystem) as any)
    .getEntriesByName('cr20')
    .group.clone()
  model.position.set(0, 0, 0)
  saveModeToPako(model, 'cr20')
  saveModeToBase64(model, 'cr20')
  downloadGLB(model)
})