Avatar cropper

'use client';

import * as React from 'react';
import { Button } from '../button/button';
import { AvatarCropper, type AvatarCropperHandle } from './avatar-cropper';

// Own drawings, made here as SVG: a head-and-shoulders portrait and a wide hill landscape.
const PORTRAIT = `<svg xmlns="http://www.w3.org/2000/svg" width="800" height="1000" viewBox="0 0 800 1000">
<defs><linearGradient id="b" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#7d97a0"/><stop offset="1" stop-color="#3e5661"/></linearGradient>
<radialGradient id="s" cx=".42" cy=".38" r=".75"><stop offset="0" stop-color="#f3cdb0"/><stop offset="1" stop-color="#d49673"/></radialGradient></defs>
<rect width="800" height="1000" fill="url(#b)"/>
<path d="M230 500c-25-230 80-350 175-350s205 120 170 350c-12 80-38 150-58 190H290c-30-55-54-115-60-190Z" fill="#7b3f24"/>
<path d="M110 1000c18-180 140-280 290-280s272 100 290 280Z" fill="#26323b"/>
<path d="M345 640h110v100c-35 30-75 30-110 0Z" fill="#cf8f6c"/>
<ellipse cx="400" cy="470" rx="148" ry="188" fill="url(#s)"/>
<ellipse cx="346" cy="468" rx="15" ry="9" fill="#3a2923"/><ellipse cx="456" cy="468" rx="15" ry="9" fill="#3a2923"/>
<path d="M318 440q28-16 56-4M428 436q28-12 56 4" stroke="#6b3a24" stroke-width="7" fill="none" stroke-linecap="round"/>
<path d="M402 480q-10 40 4 52" stroke="#bf8162" stroke-width="6" fill="none" stroke-linecap="round"/>
<path d="M362 572q40 24 80 0" stroke="#a85b50" stroke-width="9" fill="none" stroke-linecap="round"/>
<path d="M248 470c-4-170 80-262 165-262 96 0 160 90 154 230-58-78-150-112-238-82-36 12-64 48-81 114Z" fill="#934f2e"/>
</svg>`;

const LANDSCAPE = `<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900" viewBox="0 0 1600 900">
<defs><linearGradient id="k" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#f6c99a"/><stop offset=".6" stop-color="#e9a07c"/><stop offset="1" stop-color="#b9707a"/></linearGradient></defs>
<rect width="1600" height="900" fill="url(#k)"/>
<circle cx="1120" cy="380" r="110" fill="#fde3b8"/>
<path d="M0 560 260 380l210 140 250-230 300 260 220-150 360 230v270H0Z" fill="#8a5a6e"/>
<path d="M0 680c240-90 470-110 720-60s520 40 880-40v320H0Z" fill="#5a3f58"/>
<path d="M0 800c300-50 640-60 960-20s460 20 640-10v130H0Z" fill="#3a2c40"/>
</svg>`;

const toUrl = (svg: string) => `data:image/svg+xml,${encodeURIComponent(svg)}`;
const PHOTOS = { portrait: toUrl(PORTRAIT), landscape: toUrl(LANDSCAPE) };

// The pretend upload takes 800ms; Replay steps are spaced so each motion can finish.
const UPLOAD = 800;
const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
const pretendUpload = () => wait(UPLOAD).then(() => undefined);

export default function AvatarCropperDemo({ replay = 0 }: { replay?: number }) {
  const [photo, setPhoto] = React.useState<string | null>(null);
  const [logo, setLogo] = React.useState<string | null>(null);
  const cropper = React.useRef<AvatarCropperHandle>(null);
  const run = React.useRef(0);

  React.useEffect(() => {
    if (replay === 0) return;
    const mine = ++run.current;
    const step = async (ms: number, action: () => unknown) => {
      await wait(ms);
      if (mine === run.current) await action();
    };
    cropper.current?.reset();
    setPhoto(null);
    void (async () => {
      await step(300, () => cropper.current?.open(PHOTOS.portrait));
      await step(900, () => cropper.current?.zoomTo(2));
      await step(700, () => cropper.current?.panBy(-24, 0));
      await step(600, () => cropper.current?.rotate());
      await step(900, () => cropper.current?.save());
    })();
    return () => {
      run.current += 1;
    };
  }, [replay]);

  return (
    <div className="flex w-full flex-col items-center gap-8">
      <div className="flex w-full max-w-90 flex-col gap-3">
        <AvatarCropper
          ref={cropper}
          name="Maya Chen"
          value={photo}
          onValueChange={setPhoto}
          onSave={pretendUpload}
          onRemove={() => undefined}
        />
        <div className="flex flex-wrap gap-2 ps-20">
          <Button size="sm" hierarchy="secondary" onClick={() => void cropper.current?.open(PHOTOS.portrait)}>
            Try a portrait
          </Button>
          <Button
            size="sm"
            hierarchy="secondary"
            onClick={() => void cropper.current?.open(PHOTOS.landscape)}
          >
            Try a landscape
          </Button>
        </div>
      </div>
      <AvatarCropper
        name="Northwind Labs"
        title="Team logo"
        shape="square"
        value={logo}
        onValueChange={setLogo}
        onSave={pretendUpload}
        onRemove={() => undefined}
      />
    </div>
  );
}