/* Lodestay — Saved. The guest's own lists, and the one fact this screen exists
   to tell: which of them can still be had for the dates being searched.

   Every place here is the same record the search screen renders, so a place
   that has been taken says so without anything being written on the list. The
   count in the alert is the length of savedUnavailable — the array the cards
   under it come from. */
(() => {
  const {
    Button, Alert, AlertTitle, AlertDescription,
    Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent,
  } = window.OriginDesignSystem_7c998b;

  function SavedScreen({ data, scope, saved, onSave, onNavigate, onRun }) {
    const all = savedListingIds(data.collections);
    const unavailable = savedUnavailable(data.collections, data.listings);
    const nights = nightsBetween(scope.checkIn, scope.checkOut);

    return (
      <div className="ls-page">
        <PageHead
          path="/saved" onNavigate={onNavigate}
          title="Saved"
          lede={all.length + " places in " + data.collections.length + " lists · priced for " + formatStayRange(scope.checkIn, scope.checkOut) + ", " + formatGuests(scope.guests)}
          actions={<Button variant="outline" size="sm" onClick={() => onNavigate("/")}><Icon name="map-pinned" size={15} />Back to the map</Button>}
        />

        {all.length === 0 ? (
          <Empty>
            <EmptyHeader>
              <EmptyMedia variant="icon"><Icon name="bookmark" size={18} /></EmptyMedia>
              <EmptyTitle>Nothing saved yet</EmptyTitle>
              <EmptyDescription>Save a place from the map and it waits here, repriced whenever your dates change.</EmptyDescription>
            </EmptyHeader>
            <EmptyContent><Button onClick={() => onNavigate("/")}>Find a place</Button></EmptyContent>
          </Empty>
        ) : (
          <>
            {unavailable.length ? (
              <Alert variant="warning">
                <Icon name="calendar-x" size={16} />
                <AlertTitle>{unavailable.length} of {all.length} saved places cannot be booked for {formatStayRange(scope.checkIn, scope.checkOut)}</AlertTitle>
                <AlertDescription>
                  {unavailable.map((l) => l.name + " (" + statusValue(LISTING_AVAILABILITY, l.availability).label.toLowerCase() + ")").join(" · ")}. They stay on the list — change the dates on the map and they are priced again.
                </AlertDescription>
              </Alert>
            ) : null}

            {data.collections.map((collection) => {
              const places = collectionListings(collection, data.listings);
              const open = places.filter(LISTING_FLAGS.isBookable);
              const cheapest = open.length ? Math.min.apply(null, open.map((l) => quoteForListing(l, scope).total)) : null;
              return (
                <div className="ls-section" key={collection.id}>
                  <SectionHead
                    title={collection.name}
                    note={places.length + (places.length === 1 ? " place" : " places") + " · " + (open.length ? open.length + " bookable, from " + formatPrice(cheapest) + " for " + formatNights(nights) : "none bookable for these dates") + " · started " + formatDay(collection.savedAt)}
                  />
                  <div className="ls-cards">
                    {places.map((listing) => (
                      <PlaceCard
                        key={listing.id}
                        listing={listing}
                        scope={scope}
                        saved={saved.indexOf(listing.id) > -1}
                        onOpen={(l) => onNavigate("/stays/" + l.id)}
                        onSave={onSave}
                        transitions={listingTransitions(listing, Object.assign({ nights: nights }, scope), data.now)}
                        onRun={(t) => onRun(listing, t)}
                      />
                    ))}
                  </div>
                </div>
              );
            })}
          </>
        )}
      </div>
    );
  }

  Object.assign(window, { SavedScreen });
})();
