import { ref, computed, watch } from 'vue'
import { useScreenWidth } from './useScreenWidth'

/**
 * 智能缩放控制
 */
export function useSmartScale(imageSize: number = 100) {
  const { screenWidth } = useScreenWidth()
  
  // 基础缩放比例
  const baseScale = computed(() => imageSize / 100)
  
  // 用户手动调节的缩放因子（1.0 = 默认，0.5 = 缩小50%，1.5 = 放大50%）
  const userScaleFactor = ref(1.0)
  
  // 自动适应屏幕的缩放因子
  const autoScaleFactor = computed(() => {
    // 当屏幕宽度小于600px时，适当缩小以适应屏幕
    if (screenWidth.value < 600) {
      return Math.max(0.6, screenWidth.value / 1000) // 最小0.6倍
    }
    return 1.0
  })
  
  // 最终的缩放比例
  const finalScale = computed(() => {
    return baseScale.value * userScaleFactor.value * autoScaleFactor.value
  })
  
  // 缩放控制方法
  const zoomIn = () => {
    userScaleFactor.value = Math.min(userScaleFactor.value + 0.2, 3.0) // 最大3倍
  }
  
  const zoomOut = () => {
    userScaleFactor.value = Math.max(userScaleFactor.value - 0.2, 0.3) // 最小0.3倍
  }
  
  const resetZoom = () => {
    userScaleFactor.value = 1.0
  }
  
  // 自动适应屏幕
  const fitToScreen = () => {
    userScaleFactor.value = 1.0 / autoScaleFactor.value
  }
  
  // 缩放级别文本
  const scaleText = computed(() => {
    const percentage = Math.round(userScaleFactor.value * 100)
    return `${percentage}%`
  })
  
  // 是否可以放大/缩小
  const canZoomIn = computed(() => userScaleFactor.value < 3.0)
  const canZoomOut = computed(() => userScaleFactor.value > 0.3)
  
  return {
    finalScale,
    userScaleFactor,
    autoScaleFactor,
    scaleText,
    canZoomIn,
    canZoomOut,
    zoomIn,
    zoomOut,
    resetZoom,
    fitToScreen,
  }
}
