/** The address: a compact horizontal chip on the header row (street/number over nickname).
* Tapped, the chip appears to grow: the card is clipped to the chip's exact box at its
* top-right corner and un-clips down and to the left, same dark material, so nothing new
* arrives on screen — the chip just got bigger. It stops short of the right edge.
*
* Inside: globe + city/state + "Meus endereços" on the left, the saved addresses as
* horizontal rows stacked on the right (tap to switch), route map along the bottom. */
function AddressRail({ addresses, open, onOpen, onClose, onPick, onSave, onDelete, restaurant }) {
const current = addresses[0];
const W = 318, CHIP_W = 146, CHIP_H = 40, TIME_H = 34, STAGE_H = 206, BAR_H = 46;
const width = W;
const [route, setRoute] = React.useState(null);
const [manage, setManage] = React.useState(false);
const [turned, setTurned] = React.useState(false);
const [editing, setEditing] = React.useState(null); // address line, or "new"
const [draft, setDraft] = React.useState({ label: "", line: "", city: "", cep: "" });
const [locating, setLocating] = React.useState(null); // null | "busy" | "done" | "off"
const [unrolled, setUnrolled] = React.useState(false); // editor stretch animation
const [grown, setGrown] = React.useState(false); // chip → card un-clip
React.useEffect(() => {
if (!open) { setGrown(false); return; }
const r = requestAnimationFrame(() => setGrown(true));
return () => cancelAnimationFrame(r);
}, [open]);
const collapse = () => { setGrown(false); setTimeout(onClose, 240); };
// one continuous move: the globe turns, zooms past its own edge, and the map takes over
const [spin, setSpin] = React.useState(false);
const [mapOn, setMapOn] = React.useState(false);
React.useEffect(() => {
if (!open) { setSpin(false); setMapOn(false); return; }
const a = setTimeout(() => setSpin(true), 140);
const b = setTimeout(() => setMapOn(true), 560);
return () => { clearTimeout(a); clearTimeout(b); };
}, [open]);
React.useEffect(() => {
if (!editing) { setUnrolled(false); return; }
const r = requestAnimationFrame(() => setUnrolled(true));
return () => cancelAnimationFrame(r);
}, [editing]);
React.useEffect(() => { if (!open) { setManage(false); setEditing(null); setLocating(null); } }, [open]);
React.useEffect(() => { setLocating(null); }, [editing]);
// one frame in the rotated pose, then ease to upright — reads as the card turning.
// Leaving runs the same beats backwards so the globe and map return, not snap.
const [leaving, setLeaving] = React.useState(false);
React.useEffect(() => {
if (!manage) { setTurned(false); return; }
const r = requestAnimationFrame(() => setTurned(true));
return () => cancelAnimationFrame(r);
}, [manage]);
const exitManage = () => { setEditing(null); setTurned(false); setManage(false); };
const prep = restaurant ? (restaurant.prepMin || 15) : null;
const ride = route ? route.min : null;
const total = prep != null && ride != null ? prep + ride : null;
/** Splits a stored one-line address back into its parts for editing.
* "Rua Aurora, 148 — apto 42" → street "Rua Aurora", number "148", comp "apto 42" */
const explode = (a) => {
if (a.street != null) return { street: a.street, number: a.number || "", comp: a.comp || "", district: a.district || "" };
const [head, ...tail] = String(a.line || "").split(" — ");
const parts = head.split(", ");
const number = parts.length > 1 && /\d/.test(parts[parts.length - 1]) ? parts.pop() : "";
return { street: parts.join(", "), number, comp: tail.join(" — "), district: a.district || "" };
};
/** One canonical line from the parts — what the vertical bars and the map label read. */
const compose = (d) => {
const base = [d.street.trim(), d.number.trim()].filter(Boolean).join(", ");
return d.comp.trim() ? base + " — " + d.comp.trim() : base;
};
const startEdit = (a) => {
setEditing(a.line);
setDraft({ label: a.label, city: a.city || "", cep: a.cep || "", ...explode(a) });
};
const startNew = () => {
setEditing("new");
setDraft({ label: "", city: current.city || "", cep: "", street: "", number: "", district: "", comp: "" });
};
const commit = () => {
if (!draft.street.trim()) return;
const line = compose(draft);
const base = editing === "new" ? { lat: current.lat + 0.012, lon: current.lon + 0.014 } : {};
onSave({
...base,
label: draft.label.trim() || "Novo",
line,
short: [draft.street.trim().replace(/^(rua|av\.?|avenida|travessa|alameda)\s+/i, ""), draft.number.trim()].filter(Boolean).join(", ").slice(0, 18),
street: draft.street.trim(), number: draft.number.trim(),
district: draft.district.trim(), comp: draft.comp.trim(),
city: draft.city.trim() || current.city, cep: draft.cep.trim()
}, editing === "new" ? null : editing);
setEditing(null);
};
// real geolocation, filling CEP + city from the coordinates (reverse geocode)
const locate = () => {
if (!navigator.geolocation) { setLocating("off"); return; }
setLocating("busy");
navigator.geolocation.getCurrentPosition(async (pos) => {
const { latitude, longitude } = pos.coords;
try {
const r = await fetch("https://nominatim.openstreetmap.org/reverse?format=json&zoom=18&lat=" + latitude + "&lon=" + longitude);
const j = await r.json();
const a = j.address || {};
setDraft(d => ({
...d,
cep: a.postcode || d.cep,
city: [a.city || a.town || a.village || a.municipality, a.state_code || a.state].filter(Boolean).join(", ") || d.city,
street: a.road || d.street,
number: a.house_number || d.number,
district: a.suburb || a.neighbourhood || a.city_district || d.district
}));
setLocating("done");
} catch (e) { setLocating("off"); }
}, () => setLocating("off"), { timeout: 8000 });
};
/** Inputs keep the row's own voice: the display face for the address, mono for the
* label/CEP — no boxes, just an underline that darkens on focus. */
const field = (ph, key, opts) => {
const o = opts || {};
return (
setDraft(d => ({ ...d, [key]: e.target.value }))}
style={{
width: "100%", boxSizing: "border-box", height: o.tall ? 26 : 22, padding: "0 0 3px",
border: "none", borderBottom: "1px solid var(--ink-600)", borderRadius: 0, outline: "none",
background: "transparent", color: "var(--white)",
fontFamily: o.display ? "var(--font-display)" : "var(--font-mono)",
fontWeight: o.display ? 900 : 700,
fontStretch: o.display ? "125%" : "normal",
fontSize: o.display ? 14 : 10,
letterSpacing: o.display ? "-0.01em" : "0.14em",
textTransform: "uppercase"
}} />
);
};
const label = (t) => (
{t}
);
/** city → CEP (with the locate affordance) → street → nickname → delete.
* Unrolls in place so the row appears to stretch open rather than be replaced. */
const editor = (isNew, aLine) => (
{label("Cidade")}{field("São Paulo, SP", "city", { display: true, tall: true })}
);
const iconBtn = (label, glyph, onClick, small) => (
);
const shortStreet = (a) => String(a.street || a.line || "").replace(/^(rua|av\.?|avenida|travessa|alameda|praça)\s+/i, "");
/** Collapsed: a chip on the header row, street/number over the nickname. */
if (!open) {
return (
<>
{/* stays mounted at zero height: keeps tiles warm and the ETA computed for the chip */}