<template>
  <div class="home">
    <div class="main-content">
      <div class="gallery-container">
        <h1 class="text-2xl font-bold text-center my-4">{{ __('gallery_title') }}</h1>
        <GalleryGrid :images="paginatedImages" @imageTapped="showContextMenu" />
        <Navigation 
          :currentPage="currentPage" 
          :totalPages="totalPages" 
          @prevPage="prevPage" 
          @nextPage="nextPage" 
        />
      </div>
    </div>

    <ImageContextMenu 
      v-if="currentOverlayComponent === 'contextMenu'" 
      :position="contextMenuPosition" 
      :image="selectedImage" 
      @close="currentOverlayComponent = null" 
      @print="printImage" 
      @changeStyle="showStyleSelector" 
    />

    <StyleSelector 
      v-if="currentOverlayComponent === 'styleSelector'" 
      :position="contextMenuPosition" 
      @styleSelected="applyStyle" 
      @back="goBackToContextMenu" 
      @close="currentOverlayComponent = null" 
    />
  </div>
</template>

<script setup>
import Navigation from '../Components/Navigation.vue';
import GalleryGrid from '../Components/GalleryGrid.vue';
import ImageContextMenu from '../Components/ImageContextMenu.vue';
import StyleSelector from '../Components/StyleSelector.vue';
import axios from 'axios';
import { ref, computed, onMounted, onUnmounted } from 'vue';

const images = ref([]);
const imagesPerPage = 12;
const currentPage = ref(1);
const currentOverlayComponent = ref(null); // null, 'contextMenu', 'styleSelector'
const contextMenuPosition = ref({ x: 0, y: 0 });
const selectedImage = ref(null);
let fetchInterval = null;

const totalPages = computed(() => {
  return Math.ceil(images.value.length / imagesPerPage);
});

const paginatedImages = computed(() => {
  const start = (currentPage.value - 1) * imagesPerPage;
  const end = start + imagesPerPage;
  return images.value.slice(start, end);
});

const fetchImages = () => {
  axios.get('/api/images')
    .then(response => {
      images.value = response.data;
    })
    .catch(error => {
      console.error('Error fetching images:', error);
    });
};

const showContextMenu = (image, event) => {
  selectedImage.value = image;
  contextMenuPosition.value = { x: event.clientX, y: event.clientY };
  currentOverlayComponent.value = 'contextMenu';
};

const printImage = () => {
  console.log('Printing image:', selectedImage.value);
  currentOverlayComponent.value = null;
};

const showStyleSelector = () => {
  currentOverlayComponent.value = 'styleSelector';
};

const goBackToContextMenu = () => {
  currentOverlayComponent.value = 'contextMenu';
};

const applyStyle = (style) => {
  console.log('Applying style:', style.title, 'to image:', selectedImage.value);
  axios.post('/api/images/style-change', {
    image_id: selectedImage.value.id,
    style_id: style.id,
  })
  .then(response => {
    console.log('Style change request successful:', response.data);
  })
  .catch(error => {
    console.error('Error applying style:', error);
  });
  currentOverlayComponent.value = null;
};

const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--;
  }
};

const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++;
  }
};

onMounted(() => {
  fetchImages();
  fetchInterval = setInterval(fetchImages, 5000);
});

onUnmounted(() => {
  clearInterval(fetchInterval);
});
</script>

<style scoped>
.home {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.main-content {
  display: flex;
  width: 100%;
  max-width: 1400px;
}

.gallery-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}
</style>