ai-stylegallery/resources/js/Pages/Home.vue

<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" 
    />

    <StyledImageDisplay
      v-if="currentOverlayComponent === 'styledImageDisplay'"
      :image="styledImage"
      @keep="keepStyledImage"
      @delete="deleteStyledImage"
    />
  </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 StyledImageDisplay from '../Components/StyledImageDisplay.vue'; // Import the new component
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', 'styledImageDisplay'
const contextMenuPosition = ref({ x: 0, y: 0 });
const selectedImage = ref(null);
const styledImage = ref(null); // To store the newly styled image
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);
  currentOverlayComponent.value = null; // Close style selector immediately
  // You might want to show a loading indicator here

  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);
    // Assuming the response contains the new styled image data
    styledImage.value = response.data.styled_image; // Adjust based on your API response structure
    currentOverlayComponent.value = 'styledImageDisplay'; // Show the new component
  })
  .catch(error => {
    console.error('Error applying style:', error);
    // Handle error, maybe show a notification
  });
};

const keepStyledImage = (imageToKeep) => {
  console.log('Keeping styled image:', imageToKeep);
  // Implement API call to mark image as kept/permanent if needed
  // For now, just refresh the image list to show the new image
  fetchImages();
  currentOverlayComponent.value = null; // Close the display
};

const deleteStyledImage = (imageToDelete) => {
  console.log('Deleting styled image:', imageToDelete);
  // Implement API call to delete the temporary styled image
  currentOverlayComponent.value = null; // Close the display
};

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>