ImageCropper

"use client";

import {
  Card,
  CardHeader,
  Badge,
  CardTitle,
  CardDescription,
  CardContent,
  type PimoluCropArea,
  type PimoluImageCropperLabels,
  ImageCropper,
  Code
} from "@pimolu/react";
import { useState } from "react";

const CROPPER_SRC = "/images/pimolu-studio.webp";

function CropperDemo({ aspectRatio, defaultCrop, defaultZoom, disabled, labels, }: {
  aspectRatio?: number;
  defaultCrop?: PimoluCropArea;
  defaultZoom?: number;
  disabled?: boolean;
  labels?: PimoluImageCropperLabels;
}) {
  const [crop, setCrop] = useState<PimoluCropArea>(defaultCrop ?? {
    x: 0,
    y: 0,
    width: 100,
    height: 100
  });
  const [result, setResult] = useState<string | null>(null);
  return (
    <div className="grid gap-5 min-w-0">
      <ImageCropper
        src={CROPPER_SRC}
        alt="Pimolu Studio product illustration"
        aspectRatio={aspectRatio}
        defaultCrop={defaultCrop}
        defaultZoom={defaultZoom}
        disabled={disabled}
        labels={labels}
        onChange={setCrop}
        onComplete={(blob, area) => {
          if(!blob) {
            setResult("Canvas output is unavailable in this environment.");
            return;
          }
          setResult(`${blob.type || "image"} · ${Math.max(
            1,
            Math.round(blob.size / 1024)
          )} KB · ${Math.round(area.width)}% × ${Math.round(area.height)}%`);
        }}
      />
      <div className="flex flex-wrap items-center gap-3 min-w-0">
        <Badge variant="secondary">
          x {crop.x}%
        </Badge>
        <Badge variant="secondary">
          y {crop.y}%
        </Badge>
        <Badge variant="secondary">
          {crop.width}% ×{" "}
          {crop.height}%
        </Badge>
        {
          result && (<Badge variant="success">
            {result}
          </Badge>)
        }
      </div>
      <Code block>
        {JSON.stringify(crop, null, 2)}
      </Code>
    </div>
  );
}

export function DemoExample() {
  return (
    <Card>
      <CardHeader>
        <div className="flex flex-wrap items-center gap-3 min-w-0 justify-between">
          <Badge variant="primary">Account</Badge>
          <span className="text-sm text-muted leading-relaxed">PNG · square · 512 px</span>
        </div>
        <CardTitle>Profile photo</CardTitle>
        <CardDescription>
          Choose the part of the image shown next to your name.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <CropperDemo
          aspectRatio={1}
          defaultCrop={{
            x: 12,
            y: 12,
            width: 76,
            height: 76,
          }}
          labels={{
            cropper: "Recadreur de photo",
            instructions: (
              "Déplacez le cadre ou utilisez les flèches. Tirez une poignée " +
              "pour redimensionner ; Maj accélère le déplacement."
            ),
            cropArea: "Zone de recadrage",
            zoom: "Agrandissement",
            reset: "Réinitialiser",
            apply: "Enregistrer la photo",
            resizeTopLeft: "Redimensionner en haut à gauche",
            resizeTop: "Redimensionner en haut",
            resizeTopRight: "Redimensionner en haut à droite",
            resizeRight: "Redimensionner à droite",
            resizeBottomRight: "Redimensionner en bas à droite",
            resizeBottom: "Redimensionner en bas",
            resizeBottomLeft: "Redimensionner en bas à gauche",
            resizeLeft: "Redimensionner à gauche",
          }}
        />
      </CardContent>
    </Card>
  );
}