import { texture } from 'three/examples/jsm/nodes/Nodes.js'
import {
  Application,
  base64ToUint8Array,
  downloadGLB,
  loadGLBModel,
  loadPakoModel
} from '../../src'
import { ExampleSystem } from './example-system'
import pako from 'pako'

const el: any = document.getElementById('app')

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

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

const initDropZone = () => {
  const dropZone: any = document.getElementById('app')
  // const fileUpload: any = document.getElementById('fileUpload');

  // 阻止浏览器默认行为，防止打开文件
  dropZone.addEventListener('dragover', (e: any) => {
    e.preventDefault()
    e.stopPropagation()
  })

  // 拖拽文件进入区域时改变样式
  dropZone.addEventListener('dragenter', (e: any) => {
    e.preventDefault()
    e.stopPropagation()
  })

  // 拖拽文件离开区域时恢复样式
  dropZone.addEventListener('dragleave', (e: any) => {
    e.preventDefault()
    e.stopPropagation()
  })

  // 在区域内松开鼠标即完成上传动作
  dropZone.addEventListener('drop', async (e: any) => {
    e.preventDefault()
    e.stopPropagation()

    const file = e.dataTransfer.files[0]

    const { EventManager } = app
    EventManager.publish('create-entity', file)

    console.log(file)
  })
}

initDropZone()

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 saveModelToPako = async (model, name) => {
  const userData = model.userData
  model.userData = {}
  const compressed = pako.deflate(JSON.stringify(model))
  model.userData = userData

  //   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 saveModelToGlb = async (model, name) => {
  downloadGLB(model, name)
}

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

  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)
}

const saveJpgToBase64 = (url: string, name: string) => {
  var img = new Image()
  img.crossOrigin = 'Anonymous' // This is important for cross-origin images
  img.src = url
  img.onload = function () {
    const canvas = document.createElement('canvas')
    const ctx: any = canvas.getContext('2d')
    canvas.width = img.width
    canvas.height = img.height
    ctx.drawImage(img, 0, 0, img.width, img.height)
    var base64String = canvas.toDataURL('image/jpeg')
    // 将Uint8Array数据写入Blob对象
    const blob = new Blob([base64String])

    // 生成下载链接
    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)
  }
}

const savePngToBase64 = (url: string, name: string) => {
  var img = new Image()
  img.crossOrigin = 'Anonymous' // This is important for cross-origin images
  img.src = url
  img.onload = function () {
    const canvas = document.createElement('canvas')
    const ctx: any = canvas.getContext('2d')
    canvas.width = img.width
    canvas.height = img.height
    ctx.drawImage(img, 0, 0, img.width, img.height)
    var base64String = canvas.toDataURL('image/png')
    // 将Uint8Array数据写入Blob对象
    const blob = new Blob([base64String])

    // 生成下载链接
    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)
  }
}

document.getElementById('pako')?.addEventListener('click', () => {
  const { EntityManager } = app
  const entity = EntityManager.getByName('example-entity')
  saveModelToPako(entity?.group, 'model')
})

document.getElementById('base64')?.addEventListener('click', () => {
  const { EntityManager } = app
  const entity = EntityManager.getByName('example-entity')
  saveModelToBase64(entity?.group, 'model')
})

document.getElementById('glb')?.addEventListener('click', () => {
  const { EntityManager } = app
  const entity = EntityManager.getByName('example-entity')
  saveModelToGlb(entity?.group, 'model')
})

// saveJpgToBase64('./sdr.png', 'sdr')
// saveJpgToBase64('./gainmap.jpg', 'gainmap')
// savePngToBase64('./路线.png', 'sdr')