const { Button, Select, Input, Icon } = window.FriendsCarsDesignSystem_f69f0e;

const SLIDE_MS = 7000;

function HeroStage({ onNavigate, onBook }) {
  const S = window.HERO;
  const [i, setI] = React.useState(0);
  const [hold, setHold] = React.useState(false);
  /* Only the slides that have been shown (plus the next one) are in the DOM, so the page starts on one photograph. */
  const [seen, setSeen] = React.useState(() => new Set([0, 1]));
  React.useEffect(() => {
    setSeen((p) => (p.has(i) && p.has((i + 1) % S.length) ? p : new Set(p).add(i).add((i + 1) % S.length)));
  }, [i, S.length]);

  React.useEffect(() => {
    if (hold) return;
    const t = setTimeout(() => setI((n) => (n + 1) % S.length), SLIDE_MS);
    return () => clearTimeout(t);
  }, [i, hold, S.length]);

  const s = S[i];
  const car = s.carId ? window.FLEET.find((c) => c.id === s.carId) : null;
  const go = (n) => setI((n + S.length) % S.length);
  const ask = "https://wa.me/" + window.BIZ.waBook + "?text=" + encodeURIComponent("Hello Friends Car, please share the daily rate and availability for the " + s.marque + " " + s.model + ".");

  return (
    <section className="fc-hero" aria-label="Friends Car — self-drive rental in Mumbai">
      <div className="fc-hero-stage" onMouseEnter={() => setHold(true)} onMouseLeave={() => setHold(false)}>
        <div className="fc-hero-media">
          {S.map((x, n) => (
            <figure key={x.id} className="fc-hero-slide" data-on={n === i ? "1" : "0"} aria-hidden={n === i ? "false" : "true"}>
              {seen.has(n) ? (
                <picture>
                  <source media="(max-width:900px)" srcSet={"assets/hero/m/" + x.id + ".jpg"} />
                  <img src={"assets/hero/w/" + x.id + ".jpg"} alt={x.marque + " " + x.model + " on self-drive rent in " + window.BIZ.city + " from Friends Car"}
                    loading={n ? "lazy" : "eager"} decoding="async" fetchpriority={n ? undefined : "high"}
                    style={{ "--pos-d": x.posd, "--pos-m": x.posm }} />
                </picture>
              ) : null}
            </figure>
          ))}
          <span className="fc-hero-veil" aria-hidden="true"></span>
        </div>

        <div className="fc-hero-inner">
          <article className="fc-hero-card" key={s.id}>
            <p className="fc-hero-eyebrow">Self-drive car rental in {window.BIZ.city}<i> · Since {window.BIZ.since}</i></p>
            <h1 className="fc-hero-word">
              <span className="fc-sr">Self-drive car rental in {window.BIZ.city} — </span>
              <b>{s.marque}</b><b>{s.model}</b>
            </h1>
            <div className="fc-hero-meta">
              <span>{s.fuel}</span><span>{s.gearbox}</span><span>{s.seats} seats</span><span>{window.BIZ.kmPerDay} km / day</span>
            </div>
            <div className="fc-hero-price">
              {car
                ? <React.Fragment><strong>{window.rupees(car.price)}</strong><em>per day, {window.BIZ.kmPerDay} km included</em></React.Fragment>
                : <React.Fragment><strong>Rate on request</strong><em>In the yard, not yet on the price list</em></React.Fragment>}
            </div>
            <div className="fc-hero-acts">
              {car
                ? <Button variant="primary" size="lg" iconRight="arrow-right" onClick={() => onBook(car)}>Book this car</Button>
                : <Button variant="primary" size="lg" iconRight="arrow-right" as="a" href={ask}>Ask for the rate</Button>}
              <button className="fc-hero-link" onClick={() => onNavigate("Fleet")}><span>{"Explore all " + window.FLEET.length}</span><Icon name="arrow-right" size={15} /></button>
            </div>
          </article>

          <div className="fc-hero-deck">
            <div className="fc-hero-thumbs" role="tablist" aria-label="Cars in the showreel">
              {S.map((x, n) => (
                <button key={x.id} role="tab" aria-selected={n === i} className="fc-hero-thumb" data-on={n === i ? "1" : "0"}
                  onClick={() => go(n)} aria-label={"Show the " + x.marque + " " + x.model}>
                  <img src={"assets/hero/t/" + x.id + ".jpg"} alt="" decoding="async" width="360" height="480" />
                </button>
              ))}
            </div>
            <div className="fc-hero-ctrl">
              <span className="fc-hero-count"><b>{("0" + (i + 1)).slice(-2)}</b> / {("0" + S.length).slice(-2)}</span>
              <button className="fc-hero-arrow" aria-label="Previous car" onClick={() => go(i - 1)}><Icon name="arrow-left" size={17} /></button>
              <button className="fc-hero-arrow" aria-label="Next car" onClick={() => go(i + 1)}><Icon name="arrow-right" size={17} /></button>
            </div>
          </div>
        </div>
      </div>

      <BookingPanel onSubmit={onBook} />
    </section>
  );
}

function BookingPanel({ onSubmit }) {
  const today = new Date().toISOString().slice(0, 10);
  const [cat, setCat] = React.useState("");
  const [car, setCar] = React.useState("");
  const cars = window.FLEET.filter((c) => !cat || c.cat === cat);
  return (
    <div className="fc-book" data-reveal>
      <div className="fc-book-head">
        <span className="fc-eyebrow">Check availability</span>
        <span className="fc-book-note"><Icon name="phone" size={14} color="var(--accent)" /> or call {window.BIZ.phone1}</span>
      </div>
      <div className="fc-book-grid">
        <Select label="Category" placeholder="Any category" value={cat} onChange={(e) => { setCat(e.target.value); setCar(""); }}
          options={window.CATEGORIES.map((c) => ({ value: c.id, label: c.label }))} />
        <Select label="Car" placeholder="Any car" value={car} onChange={(e) => setCar(e.target.value)}
          options={cars.map((c) => ({ value: c.id, label: c.name }))} />
        <Input label="Pickup date" type="date" defaultValue={today} />
        <Input label="Pickup time" type="time" defaultValue="10:00" />
        <Input label="Return date" type="date" defaultValue={today} />
        <Input label="Return time" type="time" defaultValue="10:00" />
        <Button variant="primary" size="lg" fullWidth iconRight="arrow-right" onClick={() => onSubmit(car ? window.FLEET.find((c) => c.id === car) : null)}>Search</Button>
      </div>
    </div>
  );
}

Object.assign(window, { HeroStage, BookingPanel });