"use client";

import { useState } from "react";
import { handler } from "./action";

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

  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (file) setFile(file);
  };
  async function handleSubmit() {
    if (!file) return;

    const form = new FormData();

    form.append("fileUpload", file);
    await handler(form);
  }

  return (
    <>
      <form>
        <input
          name="file"
          type="file"
          accept="image/png, image/jpeg"
          onChange={handleFileChange}
        />
      </form>
      <button onClick={handleSubmit}>Submit</button>
    </>
  );
}

async function handler(formData: FormData) {
  console.log(formData.get("fileUpload"));
  const upload = new Upload({
    client: new S3Client({}),
    params: {
      Key: crypto.randomUUID(),
      Bucket: Bucket.bucket.bucketName,
      Body: formData.get("fileUpload")!,
      // ContentType: formData.get("file"),
      ACL: "public-read",
    },
  });

  upload.on("httpUploadProgress", (progress) => {
    console.log(progress);
    1;
  });

  await upload.done();
}

 SyntaxError: await is only valid in async functions and the top level bodies of modules
    at __webpack_require__ (/home/madmax/sst-stuff/final-nub/packages/web/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/home/madmax/sst-stuff/final-nub/packages/web/.next/server/webpack-runtime.js:33:42)
    at eval (./src/app/action.ts:11:73)
    at (action-browser)/./src/app/action.ts (/home/madmax/sst-stuff/final-nub/packages/web/.next/server/app/page.js:356:1)
    at Function.__webpack_require__ (/home/madmax/sst-stuff/final-nub/packages/web/.next/server/webpack-runtime.js:33:42)