<template>
  <div v-if="hasImages" class="album-view">
    <!-- Album Display -->
    <div class="image-grid">
      <div v-for="(url, index) in displayedImages" 
           :key="index" 
           class="image-wrapper"
           @click="$emit('photo-click', index)">
        <img :src="url"
             :alt="t('creator.sections.album.image')"
             class="image"/>
      </div>
    </div>
  </div>
</template>

<script setup>
// Add 'photo-click' to emits
const emit = defineEmits(['photo-click']);

import { computed, ref, onMounted, onUnmounted } from "vue";
import { useI18n } from 'vue-i18n';

const props = defineProps({
  images: {
    type: Array,
    required: true,
    default: () => []
  }
});

const { t } = useI18n();

// Add a reactive window width
const windowWidth = ref(window.innerWidth);

// Update window width on resize
const handleResize = () => {
  windowWidth.value = window.innerWidth;
};

// Add and remove event listener
onMounted(() => {
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});

const hasImages = computed(() => {
  return props.images.some(url => url);
});

const nonEmptyImages = computed(() => {
  return props.images.filter(url => url);
});

// Show different number of images based on reactive window width
const displayedImages = computed(() => {
  const images = nonEmptyImages.value;
  if (windowWidth.value >= 1024) {
    return images.slice(0, 5); // 5 images on large screens
  } else if (windowWidth.value >= 768) {
    return images.slice(0, 4); // 4 images on medium screens
  }
  return images.slice(0, 3); // 3 images on smaller screens
});

// Add computed property for grid columns based on number of images
const gridColumns = computed(() => {
  const count = displayedImages.value.length;
  if (count === 1) return '1fr';
  if (count === 2) return 'repeat(2, 1fr)';
  if (count === 3) return 'repeat(3, 1fr)';
  if (count === 4) return 'repeat(4, 1fr)';
  return 'repeat(5, 1fr)';
});
</script>

<style scoped>
.album-view {
  @apply w-full;
}

.image-grid {
  @apply w-full grid;
  grid-template-columns: v-bind(gridColumns);
}

.image-wrapper {
  @apply relative w-full aspect-square;
}

.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Responsive adjustments */

</style>

<i18n>
{
  "en": {
    "creator": {
      "sections": {
        "album": {
          "title": "Photo Album",
          "image": "Album image"
        }
      }
    }
  },
  "fr": {
    "creator": {
      "sections": {
        "album": {
          "title": "Album photo",
          "image": "Image de l'album"
        }
      }
    }
  },
  "es": {
    "creator": {
      "sections": {
        "album": {
          "title": "Álbum de fotos",
          "image": "Imagen del álbum"
        }
      }
    }
  }
}
</i18n>