<?php

namespace App\Livewire;

use Livewire\Component;
use Livewire\WithFileUploads;

class UploadImage extends Component
{
    use WithFileUploads;

    public $image;               // Holds the uploaded file(s)
    public $name;               // Input name
    public $label;              // Input label
    public $required = false;   // Required field flag
    public $limit100kb = false; // Limit file size to 100KB or 2MB
    public $imgStyle = ['width' => '100%', 'height' => '135px']; // Image style
    public $multipleFileUpload = false; // Toggle multiple uploads
    public $imageUrl;           // URL for single image preview
    public $fileList = [];      // Array for multiple image previews
    public $loading = false;    // Loading state (not used extensively here)

    // Mount method to initialize props from the view
    public function mount($name, $label, $required = false, $limit100kb = false, $imgStyle = ['width' => '100%', 'height' => '135px'], $multipleFileUpload = false, $imageUrl = null)
    {
        $this->name = $name;
        $this->label = $label;
        $this->required = $required;
        $this->limit100kb = $limit100kb;
        $this->imgStyle = $imgStyle;
        $this->multipleFileUpload = $multipleFileUpload;
        $this->imageUrl = $imageUrl;
    }

    // Validation and preview logic when the image is updated
    public function updatedImage()
    {
        $this->validate([
            'image' => 'required|image|mimes:jpeg,png,gif|max:' . ($this->limit100kb ? '100' : '2048'), // 100KB or 2MB
        ]);

        if ($this->multipleFileUpload) {
            $this->fileList = array_map(function ($file) {
                return $file->temporaryUrl();
            }, $this->image);
        } else {
            $this->imageUrl = $this->image->temporaryUrl();
        }

        // Dispatch an event to notify parent components (similar to handleFileUpload in React)
        $this->dispatch('imageUploaded', $this->image);
    }

    public function render()
    {
        return view('livewire.upload-image');
    }
}