var BlogPost = function (props) {
  var slug = props.slug;
  var navigate = props.navigate;

  var _post = React.useState(null);
  var post = _post[0], setPost = _post[1];

  var _loading = React.useState(true);
  var loading = _loading[0], setLoading = _loading[1];

  var _notFound = React.useState(false);
  var notFound = _notFound[0], setNotFound = _notFound[1];

  var ghost = window.IBA_GHOST;

  React.useEffect(function () {
    if (!ghost || !slug) return;
    setLoading(true);
    setNotFound(false);

    ghost.getPost(slug).then(function (data) {
      if (data.posts && data.posts.length > 0) {
        setPost(data.posts[0]);
      } else {
        setNotFound(true);
      }
      setLoading(false);
    }).catch(function () {
      setNotFound(true);
      setLoading(false);
    });
  }, [slug]);

  if (loading) {
    return (
      <div className="ib-post-page">
        <div className="ib-post-loading">
          <span style={{ color: 'var(--amber-dim)' }}>$</span> loading...
        </div>
      </div>
    );
  }

  if (notFound || !post) {
    return (
      <div className="ib-post-page">
        <div className="ib-post-loading">
          <span style={{ color: 'var(--deep-amber)' }}>[404]</span> post not found<br/>
          <a href="/blog" style={{ color: 'var(--amber)', textDecoration: 'none' }} onClick={function (e) { e.preventDefault(); navigate('blog'); }}>
            ← back to feed
          </a>
        </div>
      </div>
    );
  }

  var date = new Date(post.published_at);
  var dateStr = date.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
  var author = post.primary_author ? post.primary_author.name : '';
  var readTime = post.reading_time || Math.ceil((post.plaintext || '').split(' ').length / 250);

  return (
    <div className="ib-post-page">
      <nav className="ib-post-breadcrumb">
        <a href="/blog" onClick={function (e) { e.preventDefault(); navigate('blog'); }}>
          <span style={{ color: 'var(--amber-dim)' }}>$</span> cd /blog
        </a>
        {post.primary_tag && (
          <>
            <span className="ib-post-breadcrumb-sep">/</span>
            <a href={'/tag/' + post.primary_tag.slug} onClick={function (e) { e.preventDefault(); navigate('tag/' + post.primary_tag.slug); }}>
              {post.primary_tag.name}
            </a>
          </>
        )}
      </nav>

      <article className="ib-post-article">
        <header className="ib-post-header">
          {post.primary_tag && (
            <span className="ib-post-header-tag">{post.primary_tag.name}</span>
          )}
          <h1 className="ib-post-header-title">{post.title}</h1>
          <div className="ib-post-meta">
            <span>{author}</span>
            <span className="ib-post-meta-sep">·</span>
            <span>{dateStr}</span>
            <span className="ib-post-meta-sep">·</span>
            <span>{readTime} min read</span>
          </div>
        </header>

        {post.feature_image && (
          <figure className="ib-post-feature-image">
            <img src={post.feature_image} alt={post.feature_image_alt || post.title} loading="lazy" />
          </figure>
        )}

        <window.GhostContent html={post.html} />

        <footer className="ib-post-footer">
          {post.tags && post.tags.length > 0 && (
            <div className="ib-post-footer-tags">
              {post.tags.map(function (tag) {
                return (
                  <a key={tag.id} href={'/tag/' + tag.slug} className="ib-post-footer-tag"
                    onClick={function (e) { e.preventDefault(); navigate('tag/' + tag.slug); }}>
                    #{tag.name}
                  </a>
                );
              })}
            </div>
          )}
          <div className="ib-post-footer-nav">
            <a href="/blog" onClick={function (e) { e.preventDefault(); navigate('blog'); }}>
              ← BACK TO FEED
            </a>
          </div>
        </footer>
      </article>

      <window.Subscribe />
    </div>
  );
};

window.BlogPost = BlogPost;