const arrayBuffer = await file.arrayBuffer();
const webpBlob = await arrayBufferToWebP(jpgArrayBuffer)

import { arrayBufferToWebP } from "webp-converter-browser";

async function uploadFile(file: File) {
  const arrayBuffer = await file.arrayBuffer();
  const webpBlob = await arrayBufferToWebP(arrayBuffer); // qualityはデフォルトで75
  const webpFile = new File(
    [webpBlob],
    file.name.replace(/\.[^/.]+$/, ".webp"),
    {
      type: "image/webp",
    },
  );

  const formData = new FormData();
  formData.append("file", webpFile);

  fetcher.submit(formData, {
    action: "/r2-upload",
    method: "POST",
    encType: "multipart/form-data",
  });
}

import { parseWithZod } from "@conform-to/zod";
import { z } from "zod";

import type { ActionFunctionArgs } from "@remix-run/cloudflare";
import { errorJson, successJson } from "~/lib/action-response";

const schema = z.object({
  file: z
    .instanceof(File, { message: "ファイルを選択してください" })
    .transform((file) => file)
    .refine((file) => file.size < 1024 * 1024, {
      message: "ファイルサイズは最大1MBです",
    }),
});

export type R2UploadResponse = {
  url: string;
};

export async function action({ request, context }: ActionFunctionArgs) {
  const formData = await request.formData();
  const submission = parseWithZod(formData, { schema });
  const lastResult = submission.reply();

  if (submission.status !== "success") {
    return errorJson({ error: "入力した情報が正しくありません", lastResult });
  }

  try {
    const now = new Date();
    now.setHours(now.getHours() + 9); // 日本時間に変換
    const year = now.getFullYear();
    const month = String(now.getMonth() + 1).padStart(2, "0");
    const day = String(now.getDate()).padStart(2, "0");

    const key = `${year}${month}${day}/${crypto.randomUUID()}.webp`; // .webp 必須！
    const webpFile = submission.value.file;

    // R2にアップロード
    const r2Object = await context.cloudflare.env.BUCKET.put(key, webpFile);
    if (r2Object === null) {
      throw new Error("画像のアップロードに失敗しました");
    }

    const url = `${context.cloudflare.env.R2_DOMAIN}/${r2Object.key}`;

    return successJson<R2UploadResponse>({ lastResult, data: { url } });
  } catch (error: unknown) {
    return errorJson({ error, lastResult });
  }
}

import { fromBlob } from "image-resize-compress";

const MAX_WIDTH = 1280
const MAX_HEIGHT = 720

/**
 * 最大の高さ・幅を超えた場合は、アスペクト比を保持したままリサイズする高さ・幅を計算して取得する
 * 超えていない場合は、元の高さ・幅をそのまま返す
 */
async function getResizedImageDimensions(file: File) {
  // 変換後の画像サイズを取得
  const image = await new Promise<HTMLImageElement>((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = reject;
    img.src = URL.createObjectURL(file);
  });

  // デバッグ用
  const beforeSizeInKB = (file.size / 1024).toFixed(1);
  console.log(
    "Before: ",
    `width=${image.width.toFixed(1)}, height=${image.height.toFixed(1)}, size=${beforeSizeInKB} KB`,
  );

  let width = image.width;
  let height = image.height;
  if (width > MAX_WIDTH || height > MAX_HEIGHT) {
    // 画像のサイズが大きい場合はリサイズ
    const aspectRatio = width / height;
    if (aspectRatio > 1) {
      // 横長の場合
      width = MAX_WIDTH;
      height = MAX_WIDTH / aspectRatio;
    } else {
      // 縦長の場合
      height = MAX_HEIGHT;
      width = MAX_HEIGHT * aspectRatio;
    }
  }

  return { width, height };
}

async function uploadFile(file: File) {
  // 変換後の画像サイズを取得
  const { width, height } = await getResizedImageDimensions(file);

  // 画像をリサイズして、WebPに変換
  const blob = new Blob([file], { type: file.type });
  const webpBlob = await fromBlob(blob, 75, width, height, "webp");
  const webpFile = new File(
    [webpBlob],
    file.name.replace(/\.[^/.]+$/, ".webp"),
    { type: "image/webp" },
  );

  // デバッグ用
  const afterSizeInKB = (webpFile.size / 1024).toFixed(1);
  console.log(
    "After: ",
    `width=${width.toFixed(1)}, height=${height.toFixed(1)}, size=${afterSizeInKB} KB`,
  );

  // 画像をR2にアップロード
  // アップロード処理を書く  ; 
}