import NoteLike from '@app/note/components/metadata/like';
import NoteReply from '@app/note/components/metadata/reply';
import NoteRepost from '@app/note/components/metadata/repost';

import { RelayContext } from '@shared/relayProvider';

import ZapIcon from '@icons/zap';

import { READONLY_RELAYS } from '@stores/constants';

import { useContext, useState } from 'react';
import useSWRSubscription from 'swr/subscription';

export default function NoteMetadata({ id, eventPubkey }: { id: string; eventPubkey: string }) {
  const pool: any = useContext(RelayContext);

  const [replies, setReplies] = useState(0);
  const [reposts, setReposts] = useState(0);
  const [likes, setLikes] = useState(0);

  useSWRSubscription(id ? ['note-metadata', id] : null, ([, key], {}) => {
    const unsubscribe = pool.subscribe(
      [
        {
          '#e': [key],
          since: 0,
          kinds: [1, 6, 7],
          limit: 20,
        },
      ],
      READONLY_RELAYS,
      (event: any) => {
        switch (event.kind) {
          case 1:
            setReplies((replies) => replies + 1);
            break;
          case 6:
            setReposts((reposts) => reposts + 1);
            break;
          case 7:
            if (event.content === '🤙' || event.content === '+') {
              setLikes((likes) => likes + 1);
            }
            break;
          default:
            break;
        }
      }
    );

    return () => {
      unsubscribe();
    };
  });

  return (
    <div className="mt-4 flex h-12 items-center gap-16 border-t border-zinc-800/50">
      <NoteReply id={id} replies={replies} />
      <NoteLike id={id} pubkey={eventPubkey} likes={likes} />
      <NoteRepost id={id} pubkey={eventPubkey} reposts={reposts} />
      <button className="group inline-flex w-min items-center gap-1.5">
        <ZapIcon width={20} height={20} className="text-zinc-400 group-hover:text-orange-400" />
        <span className="text-sm leading-none text-zinc-400 group-hover:text-zinc-200">{0}</span>
      </button>
    </div>
  );
}