/* Artwork detail page. */

function ArtworkPage({ work, data, navigate, addToCart, cart, dark }) {
  if (!work) {
    return (
      <div className="artwork-page">
        <div className="no-results"><h3>Artwork not found.</h3>
          <button className="btn-ghost" onClick={() => navigate({ name: "directory" })}>Back to artists</button>
        </div>
      </div>
    );
  }
  const artist = work.artist;
  const inCart = cart.some((c) => c.id === work.id);
  const more = artist.works.filter((w) => w.id !== work.id).slice(0, 3);
  const dims = { "4/5": "120 × 150 cm", "5/4": "150 × 120 cm", "1/1": "100 × 100 cm" }[`${work.w}/${work.h}`] || "—";

  return (
    <div className="artwork-page">
      <button className="back-link" onClick={() => navigate({ name: "profile", slug: artist.slug })}>
        <ArrowIcon dir="left" /> {artist.name}
      </button>

      <div className="aw-main">
        <div className="aw-media">
          <ArtImage work={work} dark={dark} captionVisible={false} ratio={`${work.w} / ${work.h}`} />
        </div>
        <div className="aw-side">
          <button className="aw-artist" onClick={() => navigate({ name: "profile", slug: artist.slug })}>
            <Portrait artist={artist} dark={dark} round style={{ width: 36, height: 36 }} />
            <span>{artist.name}</span>
            <span className="aw-artist-loc">{artist.flag} {artist.city}</span>
          </button>
          <h1 className="aw-title">{work.title}</h1>
          <p className="aw-sub"><em>{work.medium}</em>, {work.year}</p>

          <dl className="aw-specs">
            <div><dt>Medium</dt><dd>{work.medium}</dd></div>
            <div><dt>Year</dt><dd>{work.year}</dd></div>
            <div><dt>Dimensions</dt><dd>{dims}</dd></div>
            <div><dt>Field</dt><dd>{artist.field}</dd></div>
          </dl>

          {work.forSale ? (
            <div className="aw-buy">
              <span className="aw-price">{fmt(work.price)}</span>
              <button
                className={"btn-primary full" + (inCart ? " following" : "")}
                onClick={() => addToCart(work.id)}
              >
                {inCart ? "In cart ✓ — add another" : "Add to cart"}
              </button>
              <p className="aw-buy-note">Ships worldwide · Certificate of authenticity included</p>
            </div>
          ) : (
            <div className="aw-buy">
              <span className="aw-price muted">Not for sale</span>
              <button className="btn-ghost full" onClick={() => navigate({ name: "profile", slug: artist.slug })}>
                Enquire with the artist
              </button>
            </div>
          )}
        </div>
      </div>

      {more.length > 0 && (
        <section className="aw-more">
          <div className="section-head">
            <h2 className="section-title">More by <span className="title-num">{artist.name}</span></h2>
          </div>
          <div className="work-grid">
            {more.map((w) => (
              <WorkCard
                key={w.id}
                work={Object.assign({ artist }, w)}
                navigate={navigate}
                addToCart={addToCart}
                inCart={cart.some((c) => c.id === w.id)}
                dark={dark}
                showArtist={false}
              />
            ))}
          </div>
        </section>
      )}
    </div>
  );
}

Object.assign(window, { ArtworkPage });