import heic2any from 'heic2any'

const heicList = ['image/heic', 'image/heif']

function fileToBlob(file: File): Promise<Blob> {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onload = (e) => {
      const blob = new Blob([e.target?.result], { type: file.type })
      resolve(blob)
    }
    reader.onerror = reject
    reader.readAsArrayBuffer(file)
  })
}

function convertFile(file: File): Promise<File> {
  return new Promise(async (resolve) => {
    if (heicList.includes(file.type)) {
      try {
        const blob = await fileToBlob(file)
        const result = (await heic2any({ blob })) as Blob
        const convertToPng = new File([result], file.name.replace(/\.(heic|heif)$/, '.png'), { type: 'image/png' })

        resolve(convertToPng)
      }
      catch {}
    }
    resolve(file)
  })
}

async function convertToWebP(pngFile) {
  try {
    // 创建 ImageBitmap
    const bitmap = await createImageBitmap(pngFile)

    // 使用 OffscreenCanvas
    const canvas = new OffscreenCanvas(bitmap.width, bitmap.height)
    const ctx = canvas.getContext('2d')

    // 绘制图片
    ctx.drawImage(bitmap, 0, 0)

    // 转换为 WebP
    const blob = await canvas.convertToBlob({
      type: 'image/webp',
      quality: 0.8
    })

    bitmap.close()
    return blob
  }
  catch (error) {
    console.error('Conversion failed:', error)
    throw error
  }
}

// 使用示例
async function handleFileSelect(event) {
  const file = event.target.files[0]
  if (file && file.type === 'image/png') {
    try {
      const webpBlob = await convertToWebP(file)
      console.log('Original size:', file.size)
      console.log('WebP size:', webpBlob.size)

      // 创建预览
      const url = URL.createObjectURL(webpBlob)
      const img = new Image()
      img.src = url
      document.body.appendChild(img)

      // 清理
      URL.revokeObjectURL(url)
    }
    catch (error) {
      console.error('Conversion failed:', error)
    }
  }
}