﻿<script setup>
import { ref } from 'vue';
import { onMounted } from 'vue';
import videosData from './videos.json';
import ExplorerCard from '@/views/explorer/ExplorerCard.vue'; 

// Data
const mostLikedVideos = videosData.mostLikedVideos;
const mostBoughtVideos = videosData.mostBoughtVideos;
const mostSharedVideos = videosData.mostSharedVideos;
const mostViewedVideos = videosData.mostViewedVideos;

// State to control the current range of videos displayed
const currentRangeLiked = ref(0);
const currentRangeBought = ref(0);
const currentRangeShared = ref(0);
const currentRangeViewed = ref(0);
const videosPerRow = 4;
const animationDirection = ref('');

// Function to move to the next set of videos
const nextRow = (currentRange, videosList) => {
  if (currentRange.value + videosPerRow < videosList.length) {
    animationDirection.value = 'down';
    setTimeout(() => {
      currentRange.value += videosPerRow;
    }, 300);
  }
};

// Function to move to the previous set of videos
const previousRow = (currentRange) => {
  if (currentRange.value - videosPerRow >= 0) {
    animationDirection.value = 'up';
    setTimeout(() => {
      currentRange.value -= videosPerRow;
    }, 300);
  }
};

// Function to animate the transition
const animationClass = () => {
  if (animationDirection.value === 'down') {
    return 'transition-transform transform translate-y-full opacity-0';
  } else if (animationDirection.value === 'up') {
    return 'transition-transform transform -translate-y-full opacity-0';
  }
  return '';
};

onMounted(() => {
  animationDirection.value = '';
});
</script>

<template>
  <div class="container mx-auto py-4">

    <!-- Section Most Viewed -->
    <h2 class="text-2xl font-bold mb-2">Most Viewed</h2>
    <div class="flex flex-row">
      <div class="relative overflow-hidden">
        <div :class="`grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 mb-8 ${animationClass()}`">
          <ExplorerCard v-for="(video, index) in mostViewedVideos.slice(currentRangeViewed, currentRangeViewed + videosPerRow)" :key="video.id" :video="video" />
        </div>
      </div>
      <div class="flex flex-col justify-center px-2">
        <v-btn @click="previousRow(currentRangeViewed)" :disabled="currentRangeViewed === 0" class="mb-2">
          <v-icon>mdi-arrow-up-circle-outline</v-icon>
        </v-btn>
        <v-btn @click="nextRow(currentRangeViewed, mostViewedVideos)" :disabled="currentRangeViewed + videosPerRow >= mostViewedVideos.length">
          <v-icon>mdi-arrow-down-circle-outline</v-icon>
        </v-btn>
      </div>
    </div>

    <!-- Horizontal Line -->
    <hr class="my-3">

    <!-- Repeat similar blocks for Most Liked, Most Bought, Most Shared -->
  </div>
</template>

<style scoped>
.container {
  max-width: 1200px;
}
</style>
