import React, { useState } from 'react';
import axios from 'axios';

function UploadImages({ structureId }) {
    const [images, setImages] = useState([]);
    const [uploadStatus, setUploadStatus] = useState(null);

    const handleImageChange = (e) => {
        setImages(e.target.files);
    };

    const handleSubmit = async (e) => {
        e.preventDefault();
        if (images.length === 0) {
            setUploadStatus("Please select images to upload.");
            return;
        }

        const formData = new FormData();
        for (let i = 0; i < images.length; i++) {
            formData.append('images', images[i]);
        }

        try {
            const response = await axios.post(`/api/structure/${structureId}/add-images/`, formData, {
                headers: {
                    'Content-Type': 'multipart/form-data',
                    'Authorization': `Token ${localStorage.getItem('token')}` // assuming token is stored in localStorage
                }
            });
            setUploadStatus("Images uploaded successfully.");
            console.log(response.data);
        } catch (error) {
            setUploadStatus("Failed to upload images. " + error.message);
        }
    };

    return (
        <div>
            <form onSubmit={handleSubmit}>
                <input type="file" multiple onChange={handleImageChange} />
                <button type="submit">Upload Images</button>
            </form>
            {uploadStatus && <p>{uploadStatus}</p>}
        </div>
    );
}

export default UploadImages;