import "@shopify/ui-extensions/preact";
import { render } from "preact";

export default async () => {
  render(<Extension />, document.body);
};

// Read-only — the order is already placed by the time this renders, so
// there's nothing to collect, just to confirm. Reads the same dd_* keys
// Checkout.jsx (or the storefront widget, for non-Plus orders) wrote.
function Extension() {
  const attributes = shopify.attributes.value ?? [];
  const get = (key) => attributes.find((a) => a.key === key)?.value;

  const method = get("dd_method");
  const date = get("dd_date");

  if (!method || !date) return null; // no scheduling selection on this order — render nothing

  const label = method === "PICKUP" ? "Pickup" : method === "LOCAL_DELIVERY" ? "Local delivery" : "Shipping";
  const display = [get("Pickup date"), get("Delivery date"), get("Shipping date")].find(Boolean) ?? date;

  return (
    <s-banner heading={`${label} scheduled`} tone="success">
      <s-text>{display}</s-text>
    </s-banner>
  );
}