import React from 'react';
import ReactDOM from 'react-dom';
import { CloudinaryUploadWidget } from 'react-cloudinary-uploader';

const handleUploadSuccess = (info) => {
  console.log("Upload success:", info);
};

const handleUploadFailure = (error) => {
    console.error("Upload error:", error);
};

const pictureUploaderOptions = {
  clientAllowedFormats: ['jpg', 'jpeg', 'png', 'gif'], // allowed file formats
  resourceType: 'image', // resource type, either 'image' or 'video'
  cropping: true, // cropping is enabled
  croppingAspectRatio: 1, // square aspect ratio
  croppingShowDimensions: true, // show cropping dimensions
  croppingValidateDimensions: true, // validate image dimensions after cropping
  maxFileSize: 10000000, // max file size in bytes (10 MB)
  folder: 'images', // Cloudinary folder to upload to
  sources: ['local', 'url', 'camera', 'google_drive'], // upload sources, either 'local', 'url', 'camera' or 'google_drive'
};

const App = () => (
  <div>
    <h1>Cloudinary Upload Widget Example</h1>
    <CloudinaryUploadWidget
        cloudName="your-cloud-name"
        uploadPreset="your-upload-preset"
        buttonStyle={{ border: "1px solid black", padding: "10px" }}
        buttonClass='custom-class' // className for button element
        buttonText="Choose Image"
        onUploadSuccess={handleUploadSuccess}
        onUploadFailure={handleUploadFailure}
        options={pictureUploaderOptions}
    />
    <CloudinaryUploadWidget
      cloudName="your-cloud-name"
      uploadPreset="your-upload-preset"
      options={pictureUploaderOptions}
      onUploadSuccess={handleUploadSuccess}
      onUploadFailure={handleUploadFailure}
    >
      <button
        style={{
          color: 'white',
          border: 'none',
          width: '120px',
          backgroundColor: '#bbb',
          borderRadius: '4px',
          cursor: 'pointer',
        }}
        className='custom-class'
      >Upload Picture</button>
    </CloudinaryUploadWidget>
  </div>
);

ReactDOM.render(<App />, document.getElementById("root"));