import type { Route } from "./+types/task";
import React, { useEffect, useState } from "react";
import type { ChangeEvent } from "react";

export default function Task() {
  const [file, setFile] = useState<File | null>(null);

  // handle file input change event
  const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
    setFile(event.target.files?.[0] || null);
  };

  const handleFileUpload = async () => {
    if (!file) {
      alert('Please select a file to upload.');
      return;
    }

    // create a FormData object to hold the file data
    const formData = new FormData();
    formData.append('file', file);

    

    try {
      const response = await fetch('https://api.cloudflare.com/client/v4/accounts/<my-id>/images/v1', {
        method: 'POST',
        headers: {
          'Authorization': 'Bearer <my-api-key>',
        },
        body: formData,
      });

      // check if the response is ok
      const result = await response.json();
      console.log('Upload successful:', result);
    } catch (error) {
      console.error('Error during file upload:', error);
    }
  };
  return (
    <div className="block">
        <h1>File Upload</h1>
        <input type="file" onChange={handleFileChange} />
        <button onClick={handleFileUpload}>Submit</button>
    </div>
  );
}