// Snackbar — Vendoo Design System
// A brief, low-emphasis message on an inverse (dark) surface, shown at the
// bottom of the screen to confirm an action. Optional single text action and/or
// a close affordance. One- or two-line. Requires tokens.css and assets/icons.js.
//
// ── This file ───────────────────────────────────────────────────────────────
// The CANONICAL design-system Snackbar source (snackbar/Snackbar.jsx), verbatim
// — NOT a reimplementation. The published _ds_bundle.js shipped to this project
// predates the Snackbar, so the playground loads the component here and registers
// it on window.VendooDesignSystem_a81b7b.Snackbar (the same namespace the bundle
// uses), exactly as Navigation.jsx does. Authored to load straight in the browser
// as a Babel script: it registers Snackbar instead of using a top-level `export`
// (the in-browser Babel transform rejects ESM `export`). When compiled into the
// design-system bundle this same body is wrapped with `export function Snackbar`.
// ─────────────────────────────────────────────────────────────────────────────

(function () {
  const React = window.React;

  const VDS_SNACKBAR_CSS = `
.vds-snackbar{
  display:flex; flex-direction:row; align-items:center; gap:0;
  width:327px; max-width:min(672px, calc(100vw - 32px)); min-height:48px;
  box-sizing:border-box;
  background:var(--sys-inverse-surface); border-radius:var(--radius-xs);
  box-shadow:var(--elev-3); overflow:hidden;
  padding:14px 16px;
}
.vds-snackbar--multiline{ align-items:flex-start; }
.vds-snackbar--close{ padding:0 16px; }                         /* close box sets the height */
.vds-snackbar--close.vds-snackbar--multiline{ padding:10px 16px; }
.vds-snackbar--action{ gap:4px; padding:4px 8px 4px 16px; }
.vds-snackbar--action.vds-snackbar--multiline{ padding:14px 8px 14px 16px; align-items:flex-start; }
.vds-snackbar--action.vds-snackbar--close{ padding:0 16px; }
.vds-snackbar--action.vds-snackbar--close.vds-snackbar--multiline{ padding:10px 16px; }

.vds-snackbar__text{
  flex:1 1 auto; align-self:stretch;
  font:var(--type-body-medium); letter-spacing:var(--type-body-medium-letter-spacing);
  color:var(--sys-inverse-on-surface);
  display:flex; align-items:center;
}
.vds-snackbar--multiline .vds-snackbar__text{ align-items:flex-start; }

.vds-snackbar__trailing{ display:flex; flex-direction:row; align-items:center; flex-shrink:0; align-self:stretch; }

/* ── Action (text button on inverse surface) ── */
.vds-snackbar__action{
  flex-shrink:0; align-self:stretch;
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 12px; border:0; background:transparent; cursor:pointer;
  border-radius:var(--radius-xs);
  font:var(--type-label-large); letter-spacing:var(--type-label-large-letter-spacing);
  color:var(--sys-inverse-primary);
  transition:background-color 100ms cubic-bezier(0.2,0,0,1);
}
.vds-snackbar__action:hover{ background:var(--state-layers-inverseOnSurface-opacity-0_08); }
.vds-snackbar__action:focus-visible{ background:var(--state-layers-inverseOnSurface-opacity-0_10); outline:none; }
.vds-snackbar__action:active{ background:var(--state-layers-inversePrimary-opacity-0_10); }

/* ── Close affordance (48×48 icon button) ── */
.vds-snackbar__close{
  flex-shrink:0;
  width:48px; height:48px; padding:0; border:0; background:transparent; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.vds-snackbar__close-state{
  width:40px; height:40px; border-radius:var(--radius-xs);
  display:flex; align-items:center; justify-content:center;
  color:var(--sys-inverse-on-surface);
  transition:background-color 100ms cubic-bezier(0.2,0,0,1);
}
.vds-snackbar__close:hover .vds-snackbar__close-state{ background:var(--state-layers-inverseOnSurface-opacity-0_08); }
.vds-snackbar__close:focus-visible{ outline:none; }
.vds-snackbar__close:focus-visible .vds-snackbar__close-state,
.vds-snackbar__close:active .vds-snackbar__close-state{ background:var(--state-layers-inverseOnSurface-opacity-0_10); }
.vds-snackbar__close v-icon{ width:var(--sys-size-icon-default); height:var(--sys-size-icon-default); display:block; }
`;

  function vdsInjectCss(id, css){
    if (typeof document === "undefined" || document.getElementById(id)) return;
    const s = document.createElement("style"); s.id = id; s.textContent = css; document.head.appendChild(s);
  }

  function Snackbar({
    text = "Snackbar supporting text",
    actionLabel,
    onAction,
    showClose = false,
    onClose,
    multiline = false,
  } = {}) {
    vdsInjectCss("vds-snackbar-css", VDS_SNACKBAR_CSS);

    const hasAction = !!actionLabel;
    const cls = [
      "vds-snackbar",
      hasAction ? "vds-snackbar--action" : "",
      showClose ? "vds-snackbar--close" : "",
      multiline ? "vds-snackbar--multiline" : "",
    ].filter(Boolean).join(" ");

    const action = hasAction ? (
      <button type="button" className="vds-snackbar__action" onClick={onAction}>{actionLabel}</button>
    ) : null;

    const close = showClose ? (
      <button type="button" className="vds-snackbar__close" aria-label="Dismiss" onClick={onClose}>
        <span className="vds-snackbar__close-state"><v-icon name="x"></v-icon></span>
      </button>
    ) : null;

    return (
      <div className={cls} role="status" aria-live="polite">
        <span className="vds-snackbar__text">{text}</span>
        {(action || close) ? (
          <span className="vds-snackbar__trailing">{action}{close}</span>
        ) : null}
      </div>
    );
  }

  // Register on the design-system namespace (the published bundle predates the
  // Snackbar, so this is the live source the playground pulls by name).
  const ns = (window.VendooDesignSystem_a81b7b = window.VendooDesignSystem_a81b7b || {});
  ns.Snackbar = Snackbar;
})();