import { lazy } from "react";
import type { PlimiPlugin } from "../../core/plugins/plugin-types";
import { runImageOptimizer } from "./run";

export interface ImageOptimizerOptions {
  quality: number;
  format: "image/jpeg" | "image/webp" | "image/png";
}

// Lazy load the custom UI to keep the main bundle small
const ImageOptimizerUi = lazy(() => import("./ImageOptimizerUi"));

export const imageOptimizerPlugin: PlimiPlugin<ImageOptimizerOptions> = {
  manifest: {
    id: "image-optimizer",
    name: "Image Optimizer",
    description:
      "Compress and convert images entirely in your browser using the Canvas API.",
    category: "image",
    version: "1.0.0",
    tags: ["image", "compress", "resize", "webp", "jpeg"],
    input: {
      type: "files",
      accept: ["image/jpeg", "image/png", "image/webp"],
      multiple: true,
      maxSizeMb: 20,
    },
    output: { type: "files" },
    offlineReady: true,
  },

  optionsSchema: {
    fields: [
      {
        type: "slider",
        key: "quality",
        label: "Quality",
        defaultValue: 80,
        min: 1,
        max: 100,
        step: 1,
      },
      {
        type: "select",
        key: "format",
        label: "Output Format",
        defaultValue: "image/webp",
        options: [
          { label: "WebP", value: "image/webp" },
          { label: "JPEG", value: "image/jpeg" },
          { label: "PNG", value: "image/png" },
        ],
      },
    ],
  },

  capabilities: {
    cancelable: false,
    worker: false,
    customUi: true,
  },

  run: runImageOptimizer,

  // Provide the custom UI
  customUi: ImageOptimizerUi,
};