import { jsxAsElement as jsx } from 'web-shared/src/lib/jsx';
import { TypedAttributes } from '../htmlElementTyped';
import { PostJSON } from 'web-shared/src/types/postJson';
import { oneDay } from './updatedAt';
import { Post } from '../../../build/steps/posts/create-post-object';

type CategorisedPosts = Record<string, PostJSON[]>;
const basePostsToShow = 25;

export class RecentPosts extends HTMLElement {
  postsToShow = basePostsToShow;

  constructor() {
    super();
  }

  fetchPosts = async (): Promise<CategorisedPosts> => {
    const postsResponse = await fetch('posts.json');
    const posts = ((await postsResponse.json()) as { posts: PostJSON[] }).posts;

    return {
      All: posts.filter((p) => p.publishedAt),
      'Updated this Month': posts
        .filter((p) => {
          return (
            Math.abs(
              (Date.now().valueOf() - (p.updatedAt || p.publishedAt || 0)) /
                oneDay,
            ) < 30
          );
        })
        .sort(
          (a, b) =>
            (b.updatedAt || b.publishedAt || 0) -
            (a.updatedAt || a.publishedAt || 0),
        ),
      'Weekly updates': posts.filter((post) => post.emoji === '📅'),
      Programming: posts.filter((post) => post.emoji === '💻'),
      Photography: posts.filter((post) =>
        ['✈️', '📷', '🎤', '🏚️'].includes(post.emoji as string),
      ),
      Games: posts.filter((post) => post.emoji === '🎮'),
      Thoughts: posts.filter((post) => post.emoji === '🧠'),
      Music: posts.filter((post) => post.emoji === '🎵'),
    };
  };

  renderPostList = <T,>(
    selectedPostOption: keyof T,
    postOptions: Record<keyof T, PostJSON[]>,
  ) => {
    const posts = postOptions[selectedPostOption];
    this.replaceChildren(
      <h2>{selectedPostOption}</h2>,
      <div className="postListCategories">
        <span>Category:</span>
        {...Object.keys(postOptions).map((postOption) => (
          <button
            className={postOption === selectedPostOption ? 'active' : ''}
            onclick={() => {
              this.postsToShow = basePostsToShow;
              this.renderPostList(postOption as keyof T, postOptions);
            }}
          >
            {postOption}
          </button>
        ))}
      </div>,
      <ul className="postsList">
        {...posts.slice(0, this.postsToShow).map((post, index) => {
          const publishedAt = new Date(post.publishedAt || 0);
          const updatedAt = new Date(post.updatedAt || 0);

          return (
            <li>
              {post.emoji || '📝'}
              <a href={post.url.replace('https://pfy.ch', '')}>
                <span>
                  <span className="date">
                    {publishedAt.toLocaleDateString()} -{' '}
                  </span>
                  {post.title.replaceAll('&amp;', '&')}
                </span>
              </a>
              <updated-at
                index={`${index}`}
                date={`${updatedAt.getTime() || publishedAt.getTime()}`}
              />
            </li>
          );
        })}
      </ul>,
      posts.length > this.postsToShow ? (
        <div>
          <span>
            showing {this.postsToShow} / {posts.length} posts&nbsp;-&nbsp;
          </span>
          <button
            onclick={() => {
              this.postsToShow += this.postsToShow;
              this.renderPostList(selectedPostOption, postOptions);
            }}
          >
            show more
          </button>
        </div>
      ) : (
        <div>
          <span>
            showing {Math.min(this.postsToShow, posts.length)} / {posts.length}{' '}
            posts
          </span>
        </div>
      ),
      <br />,
    );
  };

  render = async () => {
    this.innerHTML = '';
    this.append(
      <skeleton-loader width="100%" height="735px"></skeleton-loader>,
    );

    const categorised = await this.fetchPosts();
    console.log(categorised);

    this.renderPostList('All', categorised);
  };

  connectedCallback() {
    void this.render();
  }
}