import { reactive } from 'vue'

// 全站通用的图片预览（lightbox）。任何地方的配图都可以
// openLightbox(list, index) 打开：list 是同组图片的 URL 数组，index 是
// 点击的那张。Esc / 点空白 / 关闭钮收起，左右键或箭头在同组图片间切换。
// 打开时锁 body 滚动（和菜单 sheet 同一套做法）。
const state = reactive({
  list: [],
  index: 0,
  open: false
})

export const lightboxState = state

export function openLightbox(list, index = 0) {
  if (!list || !list.length) return
  state.list = list
  state.index = Math.max(0, Math.min(index, list.length - 1))
  state.open = true
  document.body.style.overflow = 'hidden'
}

export function closeLightbox() {
  state.open = false
  document.body.style.overflow = ''
}

export function stepLightbox(delta) {
  if (!state.open || state.list.length < 2) return
  state.index = (state.index + delta + state.list.length) % state.list.length
}