/**
 * HTML转图片工具
 * 基于 html-to-image 将DOM元素转换为图片
 */

import { toCanvas } from 'html-to-image'

/**
 * 将DOM元素转换为图片
 * @param {string|HTMLElement} selector - DOM选择器或元素
 * @param {Object} options - 配置选项
 * @param {number} [options.width] - 自定义宽度（会应用到元素上）
 * @param {number} [options.height] - 自定义高度（会应用到元素上）
 * @param {number} [options.canvasWidth] - 输出画布宽度
 * @param {number} [options.canvasHeight] - 输出画布高度
 * @param {number} [options.pixelRatio] - 像素比例，默认2
 * @param {boolean} [options.useCORS] - 是否允许跨域，默认true
 * @param {string} [options.format] - 图片格式，'png'或'jpeg'，默认'png'
 * @param {number} [options.quality] - 图片质量，0-1，仅jpeg有效，默认1.0
 * @returns {Promise<string>} - 返回base64图片数据URL
 */
export async function toDataURL(selector, options = {}) {
  const {
    width,
    height,
    canvasWidth,
    canvasHeight,
    pixelRatio = 2,
    useCORS = true,
    format = 'png',
    quality = 1.0
  } = options

  const element = typeof selector === 'string' ? document.querySelector(selector) : selector
  if (!element) {
    throw new Error('Element not found')
  }

  const canvasEl = await toCanvas(element, {
    width,
    height,
    canvasWidth,
    canvasHeight,
    pixelRatio,
    cors: useCORS,
    backgroundColor: '#ffffff',
    fetchLikeCORS: true
  })

  const mimeType = format === 'jpeg' ? 'image/jpeg' : 'image/png'
  return canvasEl.toDataURL(mimeType, quality)
}

/**
 * 将DOM元素转换为图片并下载
 * @param {string|HTMLElement} selector - DOM选择器或元素
 * @param {string} [filename] - 下载文件名，不含扩展名
 * @param {Object} options - 配置选项，同toDataURL
 */
export async function toImageDownload(selector, filename = 'download', options = {}) {
  const dataUrl = await toDataURL(selector, options)

  const link = document.createElement('a')
  link.download = filename + '.png'
  link.href = dataUrl
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

/**
 * 将DOM元素转换为Blob
 * @param {string|HTMLElement} selector - DOM选择器或元素
 * @param {Object} options - 配置选项，同toDataURL
 * @returns {Promise<Blob>}
 */
export async function toBlob(selector, options = {}) {
  const dataUrl = await toDataURL(selector, options)

  const arr = dataUrl.split(',')
  const mime = arr[0].match(/:(.*?);/)[1]
  const bstr = atob(arr[1])
  let n = bstr.length
  const u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new Blob([u8arr], { type: mime })
}

/**
 * 通过 dataURL 直接下载图片
 */
export function downloadByDataURL(dataUrl, filename = 'download') {
  const link = document.createElement('a')
  link.download = filename + '.png'
  link.href = dataUrl
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

export default {
  toDataURL,
  toImageDownload,
  toBlob,
  downloadByDataURL
}