/* Lodestay — a host, at /hosts/:id. Reached from the place, from the trip and
   from the conversation; never from the bar, because a host is not a
   destination.

   Nothing here is stored. Their places are a filter of the listings array,
   their rating is the mean of the reviews those places carry — under the same
   threshold a single place obeys, so a host with two opinions has no average
   either — the quotes are priced for the dates in the scope, and your history
   with them is a filter of the bookings array. One data state: a host in the
   fixture always has at least one place, so there is no empty branch to draw. */
(() => {
  const {
    Button, Card, CardHeader, CardTitle, CardDescription, CardPanel, Separator,
  } = window.OriginDesignSystem_7c998b;

  function HostScreen({ host, data, scope, saved, onSave, onNavigate, onRun, onMessage }) {
    const places = hostListings(data.listings, host.id);
    const bookable = places.filter(LISTING_FLAGS.isBookable);
    const rating = hostRating(data.listings, host.id);
    const reviews = hostReviews(data.listings, host.id);
    const recent = hostReviewsRecent(data.listings, host.id, 3);
    const withHost = bookingsWithHost(data.bookings, host.id);
    const stayed = staysWithHost(data.bookings, host.id);
    const thread = threadWithHost(data.threads, host.id);
    const nights = nightsBetween(scope.checkIn, scope.checkOut);
    const cheapest = bookable.length ? Math.min.apply(null, bookable.map((l) => quoteForListing(l, scope).total)) : null;
    const first = host.name.split(" ")[0];

    return (
      <div className="ls-page">
        <PageHead
          path="/hosts/:id" params={{ id: host.id }} labels={{ "/hosts/:id": host.name }} onNavigate={onNavigate}
          title={host.name}
          lede={"Hosting since " + new Date(host.joinedAt).getFullYear() + " · lives in " + host.lives + " · speaks " + host.languages.join(", ")}
          actions={thread
            ? <Button variant="outline" size="sm" onClick={() => onMessage(thread)}><Icon name="message-circle" size={15} />Message {first}</Button>
            : null}
        />

        <Card>
          <CardHeader>
            <CardTitle>{first} on Lodestay</CardTitle>
            <CardDescription>Everything below counts the places {first} lists and the reviews those places carry — nothing is kept on the host.</CardDescription>
          </CardHeader>
          <CardPanel>
            <div className="ls-stack ls-stack--tight">
              <Facts items={[
                { label: "Places listed", value: String(places.length) },
                { label: "Rating across them", value: rating === null ? "No average yet" : formatRating(rating) },
                { label: "Usually answers", value: replyLine(host).replace("Usually answers ", "") },
                { label: "Stays you completed", value: String(stayed.length) },
              ]} />
              <span className="ls-note">
                {bookable.length
                  ? bookable.length + " of the " + places.length + " can be booked for " + formatStayRange(scope.checkIn, scope.checkOut) + ", from " + formatPrice(cheapest) + " for " + formatNights(nights) + "."
                  : "None of the " + places.length + " can be booked for " + formatStayRange(scope.checkIn, scope.checkOut) + "."}
                {" "}
                {rating === null
                  ? reviews.length + (reviews.length === 1 ? " review" : " reviews") + " across them — " + STAY_POLICY.ratingMinReviews + " are needed before an average is printed."
                  : "The average is the mean of all " + reviews.length + " reviews those places carry."}
              </span>
            </div>
          </CardPanel>
        </Card>

        <div className="ls-section">
          <SectionHead
            title={"Places from " + first}
            note={places.length + (places.length === 1 ? " place" : " places") + " · priced for " + formatStayRange(scope.checkIn, scope.checkOut) + ", " + formatGuests(scope.guests)}
          />
          <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>

        {withHost.length ? (
          <div className="ls-section">
            <SectionHead
              title={"Your bookings with " + first}
              note={withHost.length + (withHost.length === 1 ? " booking" : " bookings") + " · " + (stayed.length
                ? formatNights(stayed.reduce((sum, b) => sum + nightsBetween(b.checkIn, b.checkOut), 0)) + " actually slept"
                : "none of them completed yet")}
            />
            <Card>
              <CardPanel>
                <div className="ls-stays">
                  {withHost.map((booking) => {
                    const listing = listingById(data.listings, booking.listingId);
                    return (
                      <div className="ls-stay-row" key={booking.id}>
                        <span className="ls-stay-row__main">
                          <button type="button" className="ls-link ls-person__name" onClick={() => onNavigate("/trips/" + booking.id)}>{listing.name}</button>
                          <span className="ls-note">{formatStayLine(booking.checkIn, booking.checkOut, booking.guests)}</span>
                        </span>
                        <StatusBadge values={BOOKING_STATUS} value={booking.status} />
                        <span className="ls-mono">{formatPrice(quoteForBooking(booking).total)}</span>
                      </div>
                    );
                  })}
                </div>
              </CardPanel>
            </Card>
          </div>
        ) : null}

        {recent.length ? (
          <div className="ls-section">
            <SectionHead
              title={"What guests say about " + first + "’s places"}
              note={recent.length === reviews.length
                ? (reviews.length === 1 ? "The one review across them" : "All " + reviews.length + " reviews across them")
                : "The " + recent.length + " most recent of " + reviews.length + " across them"}
            />
            <Card>
              <CardPanel>
                <div className="ls-stack">
                  {recent.map((entry) => (
                    <div className="ls-review" key={entry.review.id}>
                      <div className="ls-row">
                        <span className="ls-person__name">{entry.review.name}</span>
                        <span className="ls-rating"><Icon name="star" size={12} />{entry.review.rating}</span>
                        <button type="button" className="ls-link ls-note" onClick={() => onNavigate("/stays/" + entry.listing.id)}>{entry.listing.name}</button>
                        <span className="ls-note" title={formatAbsolute(entry.review.at)}>{formatWhen(entry.review.at, data.now)}</span>
                      </div>
                      <p className="ls-review__body">{entry.review.body}</p>
                    </div>
                  ))}
                </div>
              </CardPanel>
            </Card>
          </div>
        ) : null}
      </div>
    );
  }

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