<bmx-image-editor>

<bmx-image-editor
  id="ex-image"
  lang="en-GB"
  label="Photo editor"
  aspect-ratios="free,original,1:1,4:5,3:2,16:9"
  actions="reset,download"
  type="image/jpeg"
  style="--bmx-image-editor-height: 40rem"
></bmx-image-editor>

<p class="note" id="ex-image-out">Open one of your own phone photos (drop it on the editor, paste it, or press Choose a picture after Clear) to see the location and camera details it carries, and that the saved copy has none.</p>

<div class="row" style="gap: 0.5rem; flex-wrap: wrap">
  <bmx-button variant="outline" tone="neutral" id="ex-image-clear">Clear</bmx-button>
  <bmx-button variant="outline" tone="neutral" id="ex-image-json">Copy the edits as JSON</bmx-button>
</div>

<h3>Edit each picture before it is uploaded</h3>

<bmx-upload
  id="ex-image-upload"
  label="Profile picture"
  accept="image/*"
  max-size="2097152"
  auto-upload="false"
  description="Choose a photo: crop it round, adjust it, then press Done. It is resized to 512 pixels, cleaned of its metadata, and kept under 2 MB."
></bmx-upload>

<bmx-dialog id="ex-image-dialog" heading="Crop your picture" size="lg" dismissible="false">
  <bmx-image-editor
    id="ex-image-avatar"
    tools="crop,adjust,filter"
    aspect="1:1"
    lock-aspect
    crop-shape="circle"
    max-width="512"
    max-height="512"
    type="image/png"
    actions="cancel,apply"
    style="--bmx-image-editor-height: 30rem"
  ></bmx-image-editor>
</bmx-dialog>

<script type="module">
  await Promise.all(['bmx-image-editor', 'bmx-upload', 'bmx-dialog'].map(tag => customElements.whenDefined(tag)));

  const editor = document.getElementById('ex-image');
  const out = document.getElementById('ex-image-out');

  // A stand-in photo drawn on the page, with a parcel label to redact.
  const sample = () => {
    const c = document.createElement('canvas');
    c.width = 1600;
    c.height = 1067;
    const g = c.getContext('2d');
    const sky = g.createLinearGradient(0, 0, 0, 640);
    sky.addColorStop(0, '#5b8fc7');
    sky.addColorStop(1, '#f2c48d');
    g.fillStyle = sky;
    g.fillRect(0, 0, 1600, 1067);
    g.fillStyle = '#fff3c4';
    g.beginPath();
    g.arc(1180, 330, 70, 0, Math.PI * 2);
    g.fill();
    const hill = (color, base, peaks) => {
      g.fillStyle = color;
      g.beginPath();
      g.moveTo(0, 1067);
      peaks.forEach(([x, y]) => g.lineTo(x, y));
      g.lineTo(1600, base);
      g.lineTo(1600, 1067);
      g.fill();
    };
    hill('#7d6a8f', 560, [[0, 520], [260, 330], [480, 470], [760, 260], [1040, 480], [1300, 380], [1600, 520]]);
    hill('#4c5d6e', 640, [[0, 640], [300, 520], [620, 620], [900, 500], [1240, 640], [1600, 560]]);
    const lake = g.createLinearGradient(0, 660, 0, 1067);
    lake.addColorStop(0, '#6f97b8');
    lake.addColorStop(1, '#2d4a63');
    g.fillStyle = lake;
    g.fillRect(0, 680, 1600, 387);
    g.fillStyle = '#2f3b2a';
    g.fillRect(0, 900, 1600, 167);
    g.save();
    g.translate(980, 780);
    g.rotate(-0.06);
    g.fillStyle = '#f7f3ea';
    g.fillRect(0, 0, 440, 230);
    g.fillStyle = '#1f2933';
    g.font = '600 30px system-ui, sans-serif';
    g.fillText('DELIVER TO', 28, 52);
    g.font = '28px system-ui, sans-serif';
    ['Ann Lee', '14 Harbour Road', 'Portree IV51 9EX'].forEach((line, i) => g.fillText(line, 28, 100 + i * 40));
    g.restore();
    return new Promise(resolve => c.toBlob(resolve, 'image/jpeg', 0.92));
  };

  await editor.loadImage(await sample(), 'lakeside.jpg');

  editor.addEventListener('bmxImageLoad', e => {
    const m = e.detail.metadata;
    out.textContent = m?.identifying
      ? `Opened ${e.detail.name}: ${[m.location && 'a location', m.camera && `the camera (${m.camera})`, m.serialNumber && 'a serial number', m.taken && 'the time it was taken'].filter(Boolean).join(', ')}. None of it is saved.`
      : `Opened ${e.detail.name}, ${e.detail.width} × ${e.detail.height}. It carries nothing private.`;
  });
  editor.addEventListener('bmxImageExport', e => (out.textContent = `Saved ${e.detail.file.name}, ${e.detail.width} × ${e.detail.height}, ${Math.round(e.detail.file.size / 1024)} KB.`));

  document.getElementById('ex-image-clear').addEventListener('click', () => editor.clear());
  document.getElementById('ex-image-json').addEventListener('click', async () => {
    const json = JSON.stringify(await editor.getEdits());
    await navigator.clipboard?.writeText(json).catch(() => undefined);
    out.textContent = `Edits: ${json.length > 160 ? `${json.slice(0, 160)}…` : json}`;
  });

  // The upload hands each file to the editor and waits for Done or Cancel.
  const dialog = document.getElementById('ex-image-dialog');
  const avatar = document.getElementById('ex-image-avatar');
  document.getElementById('ex-image-upload').prepareFile = async file => {
    if (!file.type.startsWith('image/')) return file;
    await dialog.openDialog();
    const edited = await avatar.editFile(file);
    await dialog.closeDialog();
    return edited;
  };
</script>