﻿<template>
  <div class="overflow-hidden relative" @wheel="handleScroll">
    <!-- Container that holds all the posts and permet le défilement -->
    <div class="relative h-[1000px] max-h-[1000px] overflow-hidden p-4">
      <div class="transition-transform duration-500" :style="{ transform: `translateY(-${scrollPosition}px)` }">
        <!-- Grille avec colonnes dynamiques basées sur la largeur -->
        <div class="grid gap-3 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 min-w-[250px]">
          <div v-for="(item, index) in contenuexclusif" :key="index"
               class="my-1 text-white rounded-lg w-full border-2 shadow h-[380px] hover-card relative overflow-hidden bg-hPrimary text-hOnPrimary border-hSecondary">
            <div class="flex justify-center items-center">            
            </div>
            <div>
              <img :src="item.photo" alt="photo" class="w-full h-auto max-h-[170px] object-cover" />

              <!-- Section du nombre de clics et du bouton d'édition -->
              <div class="flex flex-row justify-between items-center p-2">
                <div class="flex items-center">
                  <p class="text-xs">{{ item.date }}</p>
                  <p class="text-xs px-2">|</p>
                  <p class="text-xs">200 clicks</p>
                </div>
                <!-- Bouton pour éditer le contenu à droite -->
                <v-btn class="" variant="plain" @click="editCard(item)">
                  <v-icon>mdi-dots-vertical</v-icon>
                </v-btn>
              </div>

              <p class="text-md p-4">{{ item.title }}</p>
              <!-- Section des étoiles, fixée dans le coin inférieur droit -->
              <div v-if="item.rating" class="stars flex justify-end p-2 absolute bottom-0 right-0">
                <!-- Génération dynamique des étoiles -->
                <span v-for="star in 5" :key="star" class="text-yellow-500">
                  <v-icon v-if="star <= item.rating">mdi-star</v-icon>
                  <v-icon v-else>mdi-star-outline</v-icon>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>



<script setup>
import { ref, computed, defineProps } from 'vue';

function hexToRgb(hex) {
  let shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
    return r + r + g + g + b + b;
  });

  let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

function getRGB(hexColor) {
  const rgb = hexToRgb(hexColor);
  return `${rgb.r}, ${rgb.g}, ${rgb.b}`;
}

const contenuexclusif = ref([
  { title: 'Créer un site web moderne', description: 'Un guide pour concevoir un site qui attire l\'attention et se démarque.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', rating: 2, date: '2024-09-19' },
  { title: ' Les secrets d’un logo réussiLes secrets d’un logo réussiLes secrets d’un logo réussi', description: 'Découvrez les astuces pour un logo mémorable et distinctif.Découvrez les astuces pour un logo mémorable et distinctif.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', rating: 4, date: '2024-09-19' },
  { title: 'Les secrets d’un logo réussi', description: 'Découvrez les astuces pour un logo mémorable et distinctif.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', rating: 4, date: '2024-09-19' },
  { title: 'Les secrets d’un logo réussi', description: 'Découvrez les astuces pour un logo mémorable et distinctif.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', rating: 4, date: '2024-09-19' },
  { title: 'Les secrets d’un logo réussi', description: 'Découvrez les astuces pour un logo mémorable et distinctif.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', rating: 4, date: '2024-09-19' },
  { title: 'Les secrets d’un logo réussi', description: 'Découvrez les astuces pour un logo mémorable et distinctif.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', rating: 4, date: '2024-09-19' },
  { title: 'Les secrets d’un logo réussi', description: 'Découvrez les astuces pour un logo mémorable et distinctif.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', rating: 4, date: '2024-09-19' },
  { title: 'Les secrets d’un logo réussi', description: 'Découvrez les astuces pour un logo mémorable et distinctif.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', rating: 4, date: '2024-09-19' },
  { title: 'Les secrets d’un logo réussi', description: 'Découvrez les astuces pour un logo mémorable et distinctif.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', rating: 4, date: '2024-09-19' },
  { title: 'Les secrets d’un logo réussi', description: 'Découvrez les astuces pour un logo mémorable et distinctif.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', rating: 4, date: '2024-09-19' },
  { title: 'Les secrets d’un logo réussi', description: 'Découvrez les astuces pour un logo mémorable et distinctif.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', rating: 4, date: '2024-09-19' },
  { title: 'Les secrets d’un logo réussi', description: 'Découvrez les astuces pour un logo mémorable et distinctif.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', rating: 4, date: '2024-09-19' },
  { title: 'Les secrets d’un logo réussi', description: 'Découvrez les astuces pour un logo mémorable et distinctif.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', rating: 4, date: '2024-09-19' },
  { title: 'Les secrets d’un logo réussi', description: 'Découvrez les astuces pour un logo mémorable et distinctif.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', rating: 4, date: '2024-09-19' },
  { title: 'Les secrets d’un logo réussi', description: 'Découvrez les astuces pour un logo mémorable et distinctif.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', rating: 4, date: '2024-09-19' },
  { title: 'Les secrets d’un logo réussi', description: 'Découvrez les astuces pour un logo mémorable et distinctif.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', rating: 4, date: '2024-09-19' },
  // autres objets...
]);

const scrollPosition = ref(0);
const cardHeight = 320;

const props = defineProps({
  creator: {
    type: Object,
    required: true,
  },
});

function handleScroll(event) {
  event.preventDefault();
  const scrollSpeed = 100;
  scrollPosition.value += event.deltaY > 0 ? scrollSpeed : -scrollSpeed;

  const totalRows = Math.ceil(contenuexclusif.value.length / getCurrentCols());
  const visibleRows = 1000 / cardHeight;
  const maxScrollPosition = totalRows * cardHeight - visibleRows * cardHeight + 360;

  if (scrollPosition.value < 0) {
    scrollPosition.value = 0;
  } else if (scrollPosition.value > maxScrollPosition) {
    scrollPosition.value = maxScrollPosition;
  }
}

const gridColsClass = computed(() => {
  const width = window.innerWidth;
  if (width >= 1200) {
    return 'grid-cols-4';
  } else if (width >= 900) {
    return 'grid-cols-3';
  } else if (width >= 600) {
    return 'grid-cols-2';
  } else {
    return 'grid-cols-1';
  }
});

function getCurrentCols() {
  const width = window.innerWidth;
  if (width >= 1200) {
    return 4;
  } else if (width >= 900) {
    return 3;
  } else if (width >= 600) {
    return 2;
  } else {
    return 1;
  }
}

function editCard(item) {
  console.log(`Editing card: ${item.title}`);
}

window.addEventListener('resize', () => {
  gridColsClass.value = getCurrentCols();
});
</script>

<style>
.hover-card {
  transition: transform 0.3s ease-in-out;
}

.hover-card:hover {
  transform: scale(1.03); /* Effet de hover restauré */
}

.stars {
  font-size: 18px; /* Ajustez la taille des icônes */
}

.stars {
  position: absolute; /* Fixe les étoiles au bas à droite */
  bottom: 10px;
  right: 10px;
}

</style>
