# Image Upload Components Usage Guide

This guide shows how to use the ImageUploadService and components in your modules.

## Using the ImageUploadService via Dependency Injection

```typescript
// In your module's composable or service
import { injectService, SERVICE_TOKENS } from '@/core/di-container'
import type { ImageUploadService } from '@/modules/base/services/ImageUploadService'

export function useMyModuleWithImages() {
  const imageService = injectService<ImageUploadService>(SERVICE_TOKENS.IMAGE_UPLOAD_SERVICE)

  // Use the service methods
  async function uploadProductImage(file: File) {
    const result = await imageService.uploadImage(file, {
      maxSizeMB: 5,
      generateThumbnail: true
    })
    return result
  }

  function getProductImageUrl(alias: string) {
    return imageService.getResizedUrl(alias, 800)
  }

  return {
    uploadProductImage,
    getProductImageUrl
  }
}
```

## Using ImageUpload Component

```vue
<template>
  <div class="product-form">
    <h2>Add Product</h2>

    <!-- Image Upload Component -->
    <ImageUpload
      v-model="productImages"
      :multiple="true"
      :max-files="5"
      :max-size-mb="10"
      :show-primary-button="true"
      placeholder="Upload product images"
      @images-updated="handleImagesUpdated"
    />

    <!-- Rest of your form -->
    <Button @click="saveProduct" :disabled="productImages.length === 0">
      Save Product
    </Button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import ImageUpload from '@/modules/base/components/ImageUpload.vue'
import { Button } from '@/components/ui/button'

const productImages = ref([])

function handleImagesUpdated(images) {
  console.log('Images updated:', images)
  // Save image aliases to your product data
  const imageAliases = images.map(img => ({
    alias: img.alias,
    isPrimary: img.isPrimary
  }))
  // Store these in your product object
}

async function saveProduct() {
  // Save product with image aliases
  const productData = {
    name: 'Product Name',
    images: productImages.value.map(img => ({
      alias: img.alias,
      isPrimary: img.isPrimary
    }))
  }
  // Send to your API
}
</script>
```

## Using ImageDisplay Component

```vue
<template>
  <div class="product-view">
    <!-- Display product images -->
    <ImageDisplay
      :images="product.images"
      :show-thumbnails="true"
      :show-lightbox="true"
      :show-badge="true"
      :primary-image-options="{ resize: 600 }"
      alt="Product image"
      image-class="rounded-lg shadow-lg"
    />

    <h2>{{ product.name }}</h2>
    <p>{{ product.description }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import ImageDisplay from '@/modules/base/components/ImageDisplay.vue'

const product = ref({
  name: 'Example Product',
  description: 'Product description',
  images: [
    { alias: 'image1-alias', isPrimary: true },
    { alias: 'image2-alias', isPrimary: false }
  ]
})
</script>
```

## Module Integration Example - Market Module

```vue
<!-- In market module's product form -->
<template>
  <form @submit="onSubmit" class="space-y-6">
    <FormField v-slot="{ componentField }" name="name">
      <FormItem>
        <FormLabel>Product Name</FormLabel>
        <FormControl>
          <Input v-bind="componentField" />
        </FormControl>
        <FormMessage />
      </FormItem>
    </FormField>

    <!-- Image upload section -->
    <div>
      <FormLabel>Product Images</FormLabel>
      <ImageUpload
        v-model="formImages"
        :multiple="true"
        :max-files="10"
        :show-primary-button="true"
        placeholder="Add product photos"
      />
    </div>

    <Button type="submit" :disabled="!isFormValid || formImages.length === 0">
      List Product
    </Button>
  </form>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useForm } from 'vee-validate'
import * as z from 'zod'
import { toTypedSchema } from '@vee-validate/zod'
import ImageUpload from '@/modules/base/components/ImageUpload.vue'

const formSchema = toTypedSchema(z.object({
  name: z.string().min(1, "Product name is required"),
  price: z.number().min(0)
}))

const form = useForm({
  validationSchema: formSchema
})

const formImages = ref([])
const isFormValid = computed(() => form.meta.value.valid)

const onSubmit = form.handleSubmit(async (values) => {
  const productData = {
    ...values,
    images: formImages.value.map(img => ({
      alias: img.alias,
      isPrimary: img.isPrimary,
      deleteToken: img.delete_token // Store for later cleanup if needed
    }))
  }

  // Submit to your API
  console.log('Submitting product:', productData)
})
</script>
```

## Service Methods Reference

### ImageUploadService

- `uploadImage(file: File, options?)` - Upload single image
- `uploadImages(files: File[], options?)` - Upload multiple images
- `deleteImage(deleteToken: string, alias: string)` - Delete uploaded image
- `getImageUrl(alias: string, options?)` - Get processed image URL
- `getThumbnailUrl(alias: string, size?)` - Get thumbnail URL
- `getResizedUrl(alias: string, size?)` - Get resized URL
- `getBlurredUrl(alias: string, blur?)` - Get blurred placeholder
- `getCroppedUrl(alias: string, width, height)` - Get cropped URL
- `checkHealth()` - Check if pict-rs server is available

### ImageUpload Component Props

- `v-model` / `modelValue` - Array of uploaded images
- `multiple` - Allow multiple file selection
- `maxFiles` - Maximum number of files
- `maxSizeMB` - Maximum file size in MB
- `showPrimaryButton` - Show button to set primary image
- `disabled` - Disable upload functionality
- `placeholder` - Custom placeholder text

### ImageDisplay Component Props

- `images` - Array of images to display
- `alt` - Alt text for images
- `imageClass` - CSS class for main image
- `showThumbnails` - Show thumbnail gallery
- `showLightbox` - Enable lightbox on click
- `showBadge` - Show image count badge
- `thumbnailSize` - Size of thumbnails
- `primaryImageOptions` - Options for main image processing