/* Lodestay — Trips. Four sections, and every stay is in exactly one of them:
   the predicates in metrics.js partition the bookings array, so the four counts
   add up to the number in the lede.

   The middle section is the one worth looking at. A request the host has not
   answered is not work the guest can do, so it is RECESSED, not disabled: the
   muted plane, muted text, no primary control — and it names what is being
   waited on and who owes it. Recession is a property of the region, chosen once
   for this product. */
(() => {
  const {
    Button, Badge, Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent,
  } = window.OriginDesignSystem_7c998b;

  function TripRow({ booking, data, onNavigate, onRun, recessed }) {
    const listing = listingById(data.listings, booking.listingId);
    const host = hostById(data.hosts, booking.hostId);
    const quote = quoteForBooking(booking);
    const reason = BOOKING_FLAGS.reasonNeedsYou(booking, data.now);
    const transitions = bookingTransitions(booking, data.now);
    return (
      <div className="ls-trip">
        <span className="ls-trip__photo"><Photo label={listing.photos[0]} icon={iconOfKind(listing)} /></span>
        <div className="ls-trip__main">
          <button type="button" className="ls-link ls-trip__name" onClick={() => onNavigate("/trips/" + booking.id)}>{listing.name}</button>
          <span className="ls-trip__when">{formatStayLine(booking.checkIn, booking.checkOut, booking.guests)}</span>
          <span className="ls-row ls-row--tight">
            <StatusBadge values={BOOKING_STATUS} value={booking.status} />
            <span className="ls-note">
              {reason ? reason + " · " : ""}
              {labelOf(NEIGHBOURHOODS, listing.neighbourhood)} · {host.name.split(" ")[0]}
            </span>
          </span>
        </div>
        <div className="ls-trip__side">
          <span className="ls-price">{formatPrice(quote.total)}</span>
          {recessed ? (
            <span className="ls-note">{formatCountdown(booking.respondBy, data.now)}</span>
          ) : (
            <Transitions transitions={transitions} onRun={(t) => onRun(booking, t)} primaryOnly />
          )}
        </div>
      </div>
    );
  }

  function TripsScreen({ data, onNavigate, onRun }) {
    const needs = tripsNeedingYou(data.bookings, data.now);
    const waiting = tripsWaitingOnHost(data.bookings);
    const upcoming = tripsUpcoming(data.bookings, data.now);
    const past = tripsPast(data.bookings, data.now);
    const next = nextTrip(data.bookings, data.now);

    return (
      <div className="ls-page">
        <PageHead
          path="/trips" onNavigate={onNavigate}
          title="Trips"
          lede={data.bookings.length + " stays with Lodestay · " + formatNights(nightsStayed(data.bookings)) + " slept in " + LODESTAY_PRODUCT.city + " so far" + (next ? " · next one " + formatDayFull(next.checkIn) : "")}
          actions={<Button variant="outline" size="sm" onClick={() => onNavigate("/")}><Icon name="search" size={15} />Find a place</Button>}
        />

        {data.bookings.length === 0 ? (
          <Empty>
            <EmptyHeader>
              <EmptyMedia variant="icon"><Icon name="luggage" size={18} /></EmptyMedia>
              <EmptyTitle>No stays yet</EmptyTitle>
              <EmptyDescription>Places you book appear here with their dates, their payments and the way to reach the host.</EmptyDescription>
            </EmptyHeader>
            <EmptyContent><Button onClick={() => onNavigate("/")}>Find a place</Button></EmptyContent>
          </Empty>
        ) : (
          <>
            {needs.length ? (
              <div className="ls-section">
                <SectionHead title={"Needs something from you"} note={needs.length + " of " + data.bookings.length + " stays"} />
                <div className="ls-trips">
                  {needs.map((booking) => <TripRow key={booking.id} booking={booking} data={data} onNavigate={onNavigate} onRun={onRun} />)}
                </div>
              </div>
            ) : null}

            {waiting.length ? (
              <div className="ls-section">
                <SectionHead
                  title="With the host"
                  note={waiting.length === 1 ? "Nothing for you to do until they answer" : waiting.length + " requests, nothing for you to do until they answer"}
                />
                <div className="ls-recessed ls-trips">
                  {waiting.map((booking) => {
                    const host = hostById(data.hosts, booking.hostId);
                    return (
                      <React.Fragment key={booking.id}>
                        <span className="ls-note">{host.name} has {formatCountdown(booking.respondBy, data.now).replace(" left", " left to answer")} — asked {formatWhen(booking.bookedAt, data.now)}. Nothing has been charged.</span>
                        <TripRow booking={booking} data={data} onNavigate={onNavigate} onRun={onRun} recessed />
                      </React.Fragment>
                    );
                  })}
                </div>
              </div>
            ) : null}

            {upcoming.length ? (
              <div className="ls-section">
                <SectionHead title="Coming up" note={upcoming.length + (upcoming.length === 1 ? " stay, all settled" : " stays, all settled")} />
                <div className="ls-trips">
                  {upcoming.map((booking) => <TripRow key={booking.id} booking={booking} data={data} onNavigate={onNavigate} onRun={onRun} />)}
                </div>
              </div>
            ) : null}

            {past.length ? (
              <div className="ls-section">
                <SectionHead title="Been and gone" note={past.length + (past.length === 1 ? " stay" : " stays")} />
                <div className="ls-trips">
                  {past.map((booking) => <TripRow key={booking.id} booking={booking} data={data} onNavigate={onNavigate} onRun={onRun} />)}
                </div>
              </div>
            ) : null}
          </>
        )}
      </div>
    );
  }

  Object.assign(window, { TripsScreen, TripRow });
})();
