import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { toast } from 'sonner';

import { useNDK } from '@libs/ndk/provider';

import { LoaderIcon } from '@shared/icons';
import { ReplyMediaUploader } from '@shared/notes';

export function NoteReplyForm({ rootEvent }: { rootEvent: NDKEvent }) {
  const { ndk } = useNDK();
  const navigate = useNavigate();

  const [value, setValue] = useState('');
  const [loading, setLoading] = useState(false);

  const submit = async () => {
    try {
      if (!ndk.signer) return navigate('/new/privkey');

      setLoading(true);

      const event = new NDKEvent(ndk);
      event.content = value;
      event.kind = NDKKind.Text;

      // tag root event
      event.tag(rootEvent, 'reply');

      // publish event
      const publishedRelays = await event.publish();

      if (publishedRelays) {
        toast.success(`Broadcasted to ${publishedRelays.size} relays successfully.`);

        // reset state
        setValue('');
        setLoading(false);
      }
    } catch (e) {
      setLoading(false);
      toast.error(e);
    }
  };

  return (
    <div className="mt-3 flex flex-col rounded-xl bg-neutral-50 dark:bg-neutral-950">
      <textarea
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder="Reply to this post..."
        className="h-28 w-full resize-none rounded-t-xl border-transparent bg-neutral-100 px-5 py-4 text-neutral-900 !outline-none placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-900 dark:text-neutral-100 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
        spellCheck={false}
      />
      <div className="inline-flex items-center justify-end gap-2 rounded-b-xl p-2">
        <ReplyMediaUploader setValue={setValue} />
        <button
          onClick={() => submit()}
          disabled={value.length === 0 ? true : false}
          className="inline-flex h-9 w-20 items-center justify-center rounded-lg bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-50"
        >
          {loading ? <LoaderIcon className="h-4 w-4 animate-spin" /> : 'Reply'}
        </button>
      </div>
    </div>
  );
}