import Image from 'next/image';
import { useState } from 'react';
interface ArticleThumbnailProps {
    articleThumbnail: string;
    setArticleThumbnail: React.Dispatch<React.SetStateAction<string>>;
}
const ArticleThumbnail: React.FC<ArticleThumbnailProps> = ({ articleThumbnail, setArticleThumbnail }) => {
    const [selectedImage, setSelectedImage] = useState<File | null>(null);
    const [isUploading, setIsUploading] = useState(false);

    // Function to handle image selection
    const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const file = e.target.files?.[0];
        if (file) {
            setSelectedImage(file);
            setIsUploading(true);

            // Upload the selected image to Cloudinary
            uploadImageToCloudinary(file);
        }
    };

    // Function to upload image to Cloudinary
    const uploadImageToCloudinary = async (file: File) => {
        try {
            const folder = 'aurumlab/article';
            const api_url = process.env.API_URL;
            const signResponse = await fetch(`${api_url}api/sign-cloudinary?folder=${folder}`, {
                credentials: 'include',
            });
            const signData = await signResponse.json();

            const cloudinary_url = process.env.NEXT_PUBLIC_CLOUDINARY_URL;
            const cloudinary_cloud_name = process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME;
            const cloudinaryUploadUrl = `${cloudinary_url}${cloudinary_cloud_name}/image/upload`;
            const formData = new FormData();
            formData.append('file', file);
            formData.append('api_key', signData.apikey);
            formData.append('timestamp', signData.timestamp);
            formData.append('signature', signData.signature);
            formData.append('folder', folder);

            // Send a POST request to Cloudinary to upload the image
            const response = await fetch(cloudinaryUploadUrl, {
                method: 'POST',
                body: formData,
            });

            if (response.ok) {
                const data = await response.json();
                const imageUrl = data.secure_url; // Get the secure URL of the uploaded image

                // Update the articleThumbnail state with the Cloudinary URL
                setArticleThumbnail(imageUrl);
                setIsUploading(false);
            } else {
                console.error('Failed to upload image to Cloudinary');
            }
        } catch (error) {
            console.error('Error uploading image to Cloudinary:', error);
        }
    };
    return (
        <>
            <div className="mt-6 w-full xl:mt-0 xl:w-96">
                <div className="panel  mb-5">
                    <div className="text-lg">Thumbnail : </div>
                    <input
                        type="file"
                        className="my-3 block w-full cursor-pointer text-sm text-slate-500
                            file:mr-4 file:cursor-pointer file:rounded-full
                            file:border-0 file:bg-violet-50
                            file:px-4 file:py-2
                            file:text-sm file:font-semibold
                            file:text-violet-700 hover:file:bg-violet-100"
                        accept="image/*"
                        onChange={handleImageChange}
                    />
                    {selectedImage && isUploading && (
                        <div className="relative my-3 flex justify-center">
                            <Image className="w-1/2 blur-sm	" src={URL.createObjectURL(selectedImage)} alt="Thumbnail Preview" width={800} height={800} />
                            <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform">
                                <div className="text-center">
                                    <span className="m-auto inline-block h-6 w-6 animate-spin rounded-full border-[3px] border-transparent border-l-primary align-middle"></span>
                                    <div className="mt-2 font-semibold">uploading</div>
                                </div>
                            </span>
                        </div>
                    )}

                    {!isUploading && articleThumbnail && (
                        <div className="my-3 flex justify-center">
                            <Image className="w-1/2" src={articleThumbnail} alt="Thumbnail" width={800} height={800} />
                        </div>
                    )}
                </div>
            </div>
        </>
    );
};
export default ArticleThumbnail;