<template>
  <div id="card-photo" class="card" v-if="state.photo?.src">
    <div class="photo-wrap">
      <img :src="state.photo.src" alt="" @load="imgLoaded = true" :style="{ opacity: imgLoaded ? 1 : 0 }" />
      <div class="photo-info">
        <span class="photo-counter">{{ state.photo.counter }}</span>
        <div class="photo-progress">
          <div class="photo-progress-bar" ref="progressBar"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { state } from '../composables/useOverlayState'

const imgLoaded = ref(false)
const progressBar = ref<HTMLDivElement>()

watch(() => state.photo?.src, () => {
  imgLoaded.value = false
  if (!progressBar.value) return
  const bar = progressBar.value
  bar.style.transition = 'none'
  bar.style.width = '0%'
  requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      const interval = state.photo?.interval || 15
      bar.style.transition = `width ${interval}s linear`
      bar.style.width = '100%'
    })
  })
})
</script>

<style scoped>
#card-photo {
  padding: 16px;
}
.photo-wrap {
  position: relative; border-radius: 8px; overflow: hidden;
}
img {
  width: 100%; max-height: 450px;
  object-fit: cover; display: block;
  border-radius: 8px; transition: opacity 0.5s ease;
}
.photo-info {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 20px 14px 10px;
  background: linear-gradient(transparent, rgba(0,0,0,0.5));
}
.photo-counter {
  font-size: 11px; opacity: 0.7;
  display: block; margin-bottom: 6px;
}
.photo-progress {
  height: 3px; background: rgba(255,255,255,0.15);
  border-radius: 2px; overflow: hidden;
}
.photo-progress-bar {
  height: 100%; width: 0%;
  background: rgba(255,255,255,0.6);
  border-radius: 2px;
}
</style>
