// Upload Progress — Vendoo Design System  (UploadProgress · UploadProgressError)
// ─────────────────────────────────────────────────────────────────────────────
// The REAL component body, lifted VERBATIM from the design-system source
//   upload-progress/UploadProgress.jsx
// The published _ds_bundle.js predates this component and does not export it, so
// — exactly like CircularProgress.jsx / ProgressBar.jsx / Steps.jsx — this file
// registers both exports on window.VendooDesignSystem_a81b7b instead of using a
// top-level ESM `export` (the in-browser Babel transform rejects `export`). The
// playground renders these straight from the namespace; nothing is reimplemented.
//
// A 64px circular upload indicator that overlays a photo/thumbnail while it
// uploads. Three terminal states share one ring:
//   • idle      → upload_photo icon (ready to upload)
//   • uploading → a 13-petal ring that fills clockwise as `value` climbs 0→100
//   • done      → circle_check icon (UploadProgress)
//   • error     → retry_upload_alt icon in --sys-error (UploadProgressError)
//
// Content paints in --sys-on-primary (white over a photo/scrim); the error glyph
// uses --sys-error. Requires tokens.css and assets/icons.js. React is global.
//
// Source literals with no matching system token (flagged in the doc page):
//   • 64px container        — no sys size token at 64
//   • 13 petals / petal geom (6.35×14.81, full radius) — pure ring geometry
//   • 0.28 dim-petal opacity — no sys opacity token at 0.28
// ─────────────────────────────────────────────────────────────────────────────
(function () {
  const React = window.React;
  const ns = (window.VendooDesignSystem_a81b7b = window.VendooDesignSystem_a81b7b || {});

  const VDS_UPLOAD_PROGRESS_CSS = `
.vds-uprog{ position:relative; display:inline-flex; flex:none; line-height:0;
  color:var(--sys-on-primary); }
.vds-uprog__ring{ position:absolute; left:50%; top:50%; width:32px; height:32px;
  transform:translate(-50%,-50%); }
.vds-uprog__petal{ position:absolute; left:50%; top:1px; width:6.35px; height:14.81px;
  margin-left:-3.175px; border-radius:var(--sys-radius-full);
  background:currentColor; transform-origin:3.175px 15px; opacity:0.28; }
.vds-uprog__petal.is-on{ opacity:1; }
.vds-uprog__glyph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.vds-uprog__glyph v-icon{ display:block; }
.vds-uprog--error .vds-uprog__glyph{ color:var(--sys-error); }
`;

  (function injectUploadProgressCSS() {
    if (typeof document === "undefined") return;
    if (document.getElementById("vds-upload-progress-css")) return;
    var el = document.createElement("style");
    el.id = "vds-upload-progress-css";
    el.textContent = VDS_UPLOAD_PROGRESS_CSS;
    document.head.appendChild(el);
  })();

  var VDS_UPROG_PETALS = 13;

  // 13 petals at 360/13° apart. Petal 0 sits at 6 o'clock (bottom); fill advances
  // clockwise from there, matching the Figma loading1…loading12 sweep.
  function vdsUprogRing(value, size) {
    var v = Math.max(0, Math.min(100, value));
    var on = Math.round((v / 100) * VDS_UPROG_PETALS);
    var step = 360 / VDS_UPROG_PETALS;
    var k = (size || 64) / 64; // ring is 32px in the 64px frame; scale with size
    var petals = [];
    for (var i = 0; i < VDS_UPROG_PETALS; i++) {
      var angle = 180 + i * step; // start at bottom, sweep clockwise
      petals.push(
        React.createElement("span", {
          key: i,
          className: "vds-uprog__petal" + (i < on ? " is-on" : ""),
          style: { transform: "rotate(" + angle + "deg)" },
        })
      );
    }
    return React.createElement(
      "span",
      { className: "vds-uprog__ring", "aria-hidden": "true", style: { transform: "translate(-50%,-50%) scale(" + k + ")" } },
      petals
    );
  }

  function vdsUprogGlyph(name, size) {
    // Center icon sized to the Figma drawing (~34px glyph inside the 64px frame).
    var px = Math.round(size * 0.53);
    return React.createElement(
      "span",
      { className: "vds-uprog__glyph" },
      React.createElement("v-icon", { name: name, style: { width: px + "px", height: px + "px" } })
    );
  }

  // Internal renderer shared by both exported components.
  function vdsUploadProgressBase(props, kind) {
    var size = props.size || 64;
    var state = props.state || (kind === "error" ? "error" : "uploading");
    var value = props.value == null ? 0 : props.value;

    var body, announce;
    if (state === "idle") {
      body = vdsUprogGlyph("upload_photo", size);
      announce = props.label || "Ready to upload";
    } else if (state === "done") {
      body = vdsUprogGlyph("circle_check", size);
      announce = props.label || "Upload complete";
    } else if (state === "error") {
      body = vdsUprogGlyph("retry_upload_alt", size);
      announce = props.label || "Upload failed — tap to retry";
    } else {
      // uploading
      body = vdsUprogRing(value, size);
      announce = (props.label || "Uploading") + " " + Math.round(Math.max(0, Math.min(100, value))) + "%";
    }

    var cls = "vds-uprog" + (state === "error" ? " vds-uprog--error" : "") + (props.className ? " " + props.className : "");

    return React.createElement(
      "span",
      {
        className: cls,
        role: state === "uploading" ? "progressbar" : "img",
        "aria-label": announce,
        "aria-valuenow": state === "uploading" ? Math.round(Math.max(0, Math.min(100, value))) : undefined,
        "aria-valuemin": state === "uploading" ? 0 : undefined,
        "aria-valuemax": state === "uploading" ? 100 : undefined,
        style: Object.assign({ width: size + "px", height: size + "px" }, props.style),
      },
      body
    );
  }

  function UploadProgress(props) {
    return vdsUploadProgressBase(props || {}, "default");
  }

  function UploadProgressError(props) {
    return vdsUploadProgressBase(props || {}, "error");
  }

  ns.UploadProgress = UploadProgress;
  ns.UploadProgressError = UploadProgressError;
})();