// main.ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

// 引入组件样式
import 'vue-clip-track/style.css'

const app = createApp(App)
app.use(createPinia())
app.mount('#app')

{
  video: { max: 5 },
  audio: { max: 3 },
  subtitle: { max: 2 }
}

{
  showCommonItems: true,
  commonItems: ['copy', 'cut', 'delete']
}

// 实际轨道时长 = (trimEnd - trimStart) / playbackRate
// 组件会自动修正 endTime
endTime = startTime + (trimEnd - trimStart) / playbackRate

import { normalizeTime } from 'vue-clip-track'

// 规范化时间值
const time = normalizeTime(1.23456789) // => 1.235

<VideoTrack :enable-main-track-mode="true" />

// 重置组件
videoTrackRef.value.reset()

// 注册自定义 Clip 类型
videoTrackRef.value.registerClipType('custom', CustomClipComponent)

// 触发转场添加事件
videoTrackRef.value.emitTransitionAdded(transitionClip, beforeClipId, afterClipId)

// 导出项目数据
const data = videoTrackRef.value.exportData()

// 导入项目数据
videoTrackRef.value.importData(data)

// 导出为 JSON 字符串
const json = videoTrackRef.value.exportAsJSON()

// 从 JSON 导入
videoTrackRef.value.importFromJSON(json)

// 添加轨道
videoTrackRef.value.addTrack(track)

// 删除轨道
videoTrackRef.value.removeTrack(trackId)

// 更新轨道
videoTrackRef.value.updateTrack(trackId, changes)

// 获取所有轨道
const tracks = videoTrackRef.value.getTracks()

// 获取排序后的轨道
const sortedTracks = videoTrackRef.value.getSortedTracks()

// 获取指定轨道
const track = videoTrackRef.value.getTrackById(trackId)

// 获取主轨道
const mainTrack = videoTrackRef.value.getMainTrack()

// 添加 Clip
videoTrackRef.value.addClip(trackId, clip)

// 删除 Clip
videoTrackRef.value.removeClip(clipId)

// 更新 Clip
videoTrackRef.value.updateClip(clipId, changes)

// 获取指定 Clip
const clip = videoTrackRef.value.getClipById(clipId)

// 移动 Clip
videoTrackRef.value.moveClip(clipId, targetTrackId, newStartTime)

// 设置 Clip 播放倍速（仅限 MediaClip）
videoTrackRef.value.setClipPlaybackRate(clipId, 2.0, {
  allowShrink: true,   // 允许压缩后续 clip
  allowExpand: true,   // 允许扩展到空白区域
  handleCollision: true, // 处理碰撞
  keepStartTime: true  // 保持开始时间不变
})

// 获取 Clip 在指定倍速下的预计时长
const duration = videoTrackRef.value.getClipDurationAtRate(clipId, 1.5)

// 检查调整倍速后是否会产生碰撞
const hasCollision = videoTrackRef.value.checkPlaybackRateCollision(clipId, 0.5)

// 选中单个 Clip
videoTrackRef.value.selectClip(clipId)

// 选中多个 Clips
videoTrackRef.value.selectClips(clipIds)

// 清空选择
videoTrackRef.value.clearSelection()

// 获取选中的 Clips
const selectedClips = videoTrackRef.value.getSelectedClips()

// 获取选中的 Clip IDs
const selectedIds = videoTrackRef.value.getSelectedClipIds()

// 播放
videoTrackRef.value.play()

// 暂停
videoTrackRef.value.pause()

// 切换播放/暂停
videoTrackRef.value.togglePlay()

// 跳转到指定时间
videoTrackRef.value.seekTo(time)

// 获取当前时间
const currentTime = videoTrackRef.value.getCurrentTime()

// 设置播放速率
videoTrackRef.value.setPlaybackRate(rate)

// 获取播放速率
const rate = videoTrackRef.value.getPlaybackRate()

// 是否正在播放
const playing = videoTrackRef.value.isPlaying()

// 获取总时长
const duration = videoTrackRef.value.getDuration()

// 设置缩放
videoTrackRef.value.setScale(scale)

// 获取缩放
const scale = videoTrackRef.value.getScale()

// 放大
videoTrackRef.value.zoomIn()

// 缩小
videoTrackRef.value.zoomOut()

// 启用吸附
videoTrackRef.value.enableSnap()

// 禁用吸附
videoTrackRef.value.disableSnap()

// 获取吸附状态
const snapEnabled = videoTrackRef.value.isSnapEnabled()

// 撤销
videoTrackRef.value.undo()

// 重做
videoTrackRef.value.redo()

// 获取历史状态
const historyState = videoTrackRef.value.getHistoryState()
// { canUndo: boolean, canRedo: boolean }

import {
  useTracksStore,    // 轨道和 Clip 数据管理
  usePlaybackStore,  // 播放状态管理
  useHistoryStore,   // 撤销/重做历史管理
  useScaleStore,     // 缩放和吸附管理
  useDragStore,      // 拖拽状态管理
} from 'vue-clip-track'

import {
  useKeyboard,      // 快捷键处理（复制/剪切/粘贴/删除/撤销/重做等）
  useResize,        // Clip 调整大小
  useAutoScroll,    // 播放时自动滚动
  useSelection,     // 多选/范围选择
} from 'vue-clip-track'

import {
  generateId,           // 生成唯一 ID
  formatTime,           // 格式化时间显示 (HH:MM:SS:FF)
  hasTimeOverlap,       // 检查时间重叠
  clamp,                // 数值限制
  throttle,             // 节流函数
  debounce,             // 防抖函数
  isMac,                // 检测 Mac 系统
  deepClone,            // 深拷贝
  normalizeTime,        // 规范化时间精度（毫秒级）
  normalizeClipTime,    // 规范化 Clip 时间
  extractVideoThumbnails,    // 提取视频缩略图
  extractAudioWaveform,      // 提取音频波形
  extractVideoAudioWaveform, // 提取视频中的音频波形
} from 'vue-clip-track'

import type {
  // Clip 类型
  BaseClip,
  MediaClip,
  SubtitleClip,
  TextClip,
  StickerClip,
  FilterClip,
  EffectClip,
  TransitionClip,
  Clip,
  ClipType,
  Animation,
  // Track 类型
  Track,
  TrackType,
  // 配置类型
  OperationButton,
  CustomButton,
  ScaleConfigButton,
  TrackTypeConfig,
  ClipTypeConfig,
  ContextMenuItem,
  TrackContextMenuConfig,
  ClipContextMenuConfig,
  VideoTrackConfig,
  PlaybackState,
  ScaleState,
  HistoryItem,
  LocaleConfig,
  ThemeConfig,
} from 'vue-clip-track'

import { locales } from 'vue-clip-track'

// 使用中文
const zhLocale = locales['zh-CN']

// 使用英文
const enLocale = locales['en-US']

interface BaseClip {
  id: string           // 唯一标识
  trackId: string      // 所属轨道 ID
  name?: string        // 名称
  startTime: number    // 轨道内开始时间（秒）
  endTime: number      // 轨道内结束时间（秒）
  selected: boolean    // 是否选中
  
  // 可选的空间属性（用于画布定位）
  rect?: {
    x: number
    y: number
    w: number
    h: number
    angle: number
  }
  
  // 可选的动画配置
  animations?: AnimationConfig[]
  
  visible?: boolean    // 是否可见
  opacity?: number     // 透明度 (0-1)
  zIndex?: number      // 层级
}

interface MediaClip extends BaseClip {
  type: 'video' | 'audio'
  sourceUrl: string        // 媒体文件 URL
  originalDuration: number // 原始时长
  trimStart: number        // 裁剪开始时间
  trimEnd: number          // 裁剪结束时间
  playbackRate: number     // 播放倍速
  volume?: number          // 音量 (0-1)
  thumbnails?: string[]    // 视频缩略图
  waveformData?: number[]  // 音频波形数据
}

interface ThemeConfig {
  // 主色调
  primaryColor?: string
  primaryHue?: number
  primarySaturation?: number
  primaryLightness?: number
  
  // 背景色
  bgDark?: string
  bgMedium?: string
  bgLight?: string
  bgElevated?: string
  
  // 文字色
  textPrimary?: string
  textSecondary?: string
  textMuted?: string
  
  // 边框色
  borderColor?: string
  
  // 圆角
  borderRadius?: {
    sm?: number
    md?: number
    lg?: number
  }
}

interface LocaleConfig {
  // 工具栏
  reset?: string
  undo?: string
  redo?: string
  delete?: string
  play?: string
  pause?: string
  
  // 吸附
  snapOn?: string   // 点击后关闭吸附的提示
  snapOff?: string  // 点击后开启吸附的提示
  
  // 右键菜单
  copy?: string
  cut?: string
  paste?: string
  selectAll?: string
  splitClip?: string
  deleteClip?: string
  deleteTrack?: string
  lockTrack?: string
  unlockTrack?: string
  muteTrack?: string
  unmuteTrack?: string
  
  // 轨道名称
  mainTrack?: string
  videoTrack?: string
  audioTrack?: string
  subtitleTrack?: string
  // ... 更多轨道类型
  
  // 提示
  emptyTrackHint?: string
  noClipSelected?: string
  confirmDelete?: string
  confirmDeleteTrack?: string
}