<script setup lang="ts">
import { useDraggable } from '../composables/useDraggable'
import { useMarkingSettings } from '../composables/useMarkingSettings'

interface Props {
  scaleText: string
  canZoomIn: boolean
  canZoomOut: boolean
  isLandscape?: boolean
}

interface Emits {
  (e: 'zoom-in'): void
  (e: 'zoom-out'): void
  (e: 'reset-zoom'): void
  (e: 'fit-to-screen'): void
}

const props = withDefaults(defineProps<Props>(), {
  isLandscape: false,
})

const emit = defineEmits<Emits>()

// 阅卷设置
const settings = useMarkingSettings()

// 是否收起 - 从设置中获取
const isCollapsed = computed({
  get: () => settings.value.scalePanelCollapsed,
  set: (value) => {
    settings.value.scalePanelCollapsed = value
  },
})

// 拖拽功能
const panelRef = ref<HTMLElement>()
const { isDragging, position } = useDraggable(panelRef, {
  enabled: true,
  boundary: 'viewport',
  handle: '.drag-handle',
})

// 切换收起状态
function toggleCollapse() {
  isCollapsed.value = !isCollapsed.value
}
</script>

<template>
  <div
    v-if="settings.showScalePanel"
    ref="panelRef"
    class="absolute left-2 top-2 z-20 flex flex-col overflow-hidden border border-gray-200 rounded-8px bg-white shadow-lg"
    :class="{
      'w-12': isCollapsed,
      'w-32': !isCollapsed,
    }"
  >
    <!-- 拖拽手柄区域 -->
    <div
      class="drag-handle h-8 flex cursor-move items-center justify-center border-b border-gray-200 bg-gray-50 transition-all active:scale-95 hover:bg-gray-100"
      :class="{
        'cursor-grabbing': isDragging,
        'cursor-grab': !isDragging,
      }"
    >
      <!-- 拖拽图标 -->
      <div class="i-carbon-draggable text-12px text-gray-500" />
    </div>

    <!-- 展开/收起按钮 -->
    <div
      class="h-8 flex cursor-pointer items-center justify-center border-b border-gray-200 bg-white transition-all active:scale-95 hover:bg-blue-50"
      @click="toggleCollapse"
    >
      <div
        class="text-14px text-blue-600 transition-transform"
        :class="isCollapsed ? 'i-carbon-chevron-down' : 'i-carbon-chevron-up'"
      />
    </div>

    <!-- 缩放控制内容 -->
    <div v-if="!isCollapsed" class="p-2">
      <!-- 当前缩放比例 -->
      <div class="mb-2 text-center text-xs text-gray-600 font-medium">
        {{ scaleText }}
      </div>

      <!-- 按钮组 - 2x2 网格布局 -->
      <div class="grid grid-cols-2 gap-1">
        <!-- 放大按钮 -->
        <div
          class="h-8 flex cursor-pointer items-center justify-center rounded-4px transition-all active:scale-95"
          :class="canZoomIn ? 'bg-blue-500 text-white hover:bg-blue-600' : 'bg-gray-100 text-gray-400'"
          @click="canZoomIn && emit('zoom-in')"
        >
          <div class="i-carbon-zoom-in text-12px" />
        </div>

        <!-- 缩小按钮 -->
        <div
          class="h-8 flex cursor-pointer items-center justify-center rounded-4px transition-all active:scale-95"
          :class="canZoomOut ? 'bg-blue-500 text-white hover:bg-blue-600' : 'bg-gray-100 text-gray-400'"
          @click="canZoomOut && emit('zoom-out')"
        >
          <div class="i-carbon-zoom-out text-12px" />
        </div>

        <!-- 重置按钮 -->
        <div
          class="h-8 flex cursor-pointer items-center justify-center rounded-4px bg-gray-500 text-white transition-all active:scale-95 hover:bg-gray-600"
          @click="emit('reset-zoom')"
        >
          <div class="i-carbon-zoom-reset text-12px" />
        </div>

        <!-- 适应屏幕按钮 -->
        <div
          class="h-8 flex cursor-pointer items-center justify-center rounded-4px bg-green-500 text-white transition-all active:scale-95 hover:bg-green-600"
          @click="emit('fit-to-screen')"
        >
          <div class="i-carbon-fit-to-screen text-12px" />
        </div>
      </div>
    </div>

    <!-- 收起状态的提示 -->
    <div v-if="isCollapsed" class="px-1 py-2 text-center text-xs text-gray-500">
      {{ scaleText.split(' ')[0] }}
    </div>
  </div>
</template>
