<script setup>
import { computed } from 'vue'
import { DEFAULT_STRIP_THEME_ID, STRIP_THEME_MAP } from '../data/stripThemes'

const props = defineProps({
  photos: { type: Array, default: () => [] },
  theme: { type: String, default: DEFAULT_STRIP_THEME_ID },
})

const themeConfig = computed(
  () => STRIP_THEME_MAP[props.theme] || STRIP_THEME_MAP[DEFAULT_STRIP_THEME_ID],
)
const borderColor = computed(() => themeConfig.value?.borderColor || '#ffffff')
const stripShadow = computed(
  () => themeConfig.value?.shadow || '0 24px 60px rgba(0, 0, 0, 0.18)',
)

const stripSize = computed(() => themeConfig.value.size)
const frames = computed(() => themeConfig.value.slots || [])

function slotStyle(rect) {
  return {
    left: `${rect.x + 8}px`,
    top: `${rect.y + 8}px`,
    width: `${Math.max(rect.width - 16, 0)}px`,
    height: `${Math.max(rect.height - 16, 0)}px`,
  }
}

function clipStyle(rect) {
  return {
    border: `8px solid ${borderColor.value}`,
  }
}
</script>

<template>
  <div
    class="strip-root"
    :style="{
      width: `${stripSize.width}px`,
      height: `${stripSize.height}px`,
      backgroundImage: `url('${themeConfig.image}')`,
      boxShadow: stripShadow,
    }"
  >
    <div
      v-for="(rect, index) in frames"
      :key="`slot-${index}`"
      class="photo-slot"
      :style="slotStyle(rect)"
    >
      <template v-if="photos[index]">
        <template v-if="rect.radius || rect.clipPath">
          <svg :width="Math.max(rect.width - 16, 0)" :height="Math.max(rect.height - 16, 0)" :viewBox="`0 0 ${Math.max(rect.width - 16, 0)} ${Math.max(rect.height - 16, 0)}`" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
            <defs>
              <clipPath :id="`clip-${props.theme}-${index}`">
                <template v-if="rect.clipPath">
                  <path :d="rect.clipPath" />
                </template>
                <template v-else>
                  <rect x="0" y="0" :width="Math.max(rect.width - 16, 0)" :height="Math.max(rect.height - 16, 0)" :rx="rect.radius" :ry="rect.radius" />
                </template>
              </clipPath>
            </defs>
            <image :href="(photos[index].preview !== undefined) ? (photos[index].preview || photos[index].src) : ((photos[index].src !== undefined) ? photos[index].src : photos[index])" x="0" y="0" :width="Math.max(rect.width - 16, 0)" :height="Math.max(rect.height - 16, 0)" :clip-path="`url(#clip-${props.theme}-${index})`" preserveAspectRatio="xMidYMid slice" />
            <template v-if="rect.clipPath">
              <path :d="rect.clipPath" fill="none" :stroke="borderColor" stroke-width="12" stroke-linejoin="round" />
            </template>
            <template v-else>
              <rect x="6" y="6" :width="Math.max(rect.width - 28, 0)" :height="Math.max(rect.height - 28, 0)" :rx="Math.max((rect.radius || 0) - 2, 0)" :ry="Math.max((rect.radius || 0) - 2, 0)" fill="none" :stroke="borderColor" stroke-width="10" />
            </template>
          </svg>
        </template>
        <template v-else>
          <img :src="(photos[index].preview !== undefined) ? (photos[index].preview || photos[index].src) : ((photos[index].src !== undefined) ? photos[index].src : photos[index])" :alt="`Captured photo ${index + 1}`" class="frame-photo" :style="clipStyle(rect)" />
        </template>
      </template>
    </div>
  </div>
</template>

<style scoped>
.strip-root {
  position: relative;
  border-radius: 40px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* box-shadow is set inline per theme */
  overflow: hidden;
}

.photo-slot {
  position: absolute;
  border-radius: 24px;
  overflow: hidden;
}

.frame-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-sizing: border-box;
}
</style>
