import { useNavigate } from "@solidjs/router";
import { JSXElement, createEffect, createSignal, useContext } from "solid-js";
import { Portal } from "solid-js/web";

import { LoginContext } from "../../Context/GlobalState";
import { RemovePostIcon } from "../../Util/Icons";
import { deletePost } from "../../Util/api";

export default function RemovePostButton(props: {
  postId: string;
}): JSXElement {
  const navigate = useNavigate();
  const login_ctx = useContext(LoginContext)!;

  // State to track whether the post has been deleted
  const [isDeleted, setIsDeleted] = createSignal(false);

  // Function to handle post deletion
  const handleDeletePost = async (): Promise<void> => {
    try {
      const response = await deletePost(props.postId, login_ctx.token());
      if (response.ok) {
        // If deletion is successful, set isDeleted to true
        setIsDeleted(true);
        console.log("Post deleted successfully");
        // Optional: You can also navigate to "/" after successful deletion
        navigate("/");
      } else {
        console.error("Failed to delete post:", response.statusText);
        // You may want to show an error message or handle the failure in some other way
      }
    } catch (error) {
      console.error("Error deleting post:", error);
      // Handle any unexpected errors that occur during the deletion process
    }
  };

  // Effect to display modal when post is deleted
  createEffect(() => {
    if (isDeleted()) {
      // Display modal here
      <Portal mount={document.body}>
        <div class="w-100 h-100 -z-20">
          <div class="fixed inset-0 z-20 w-1/4 items-center justify-center">
            <div role="alert" class="alert alert-success">
              <p>Post was successfully removed</p>
            </div>
          </div>
        </div>
      </Portal>;
    }
  });

  return (
    <div class="flex p-1">
      <button
        class="rounded-base btn btn-xs hover:border-primary"
        aria-label="Remove post"
        onClick={handleDeletePost}
      >
        <RemovePostIcon />
      </button>
    </div>
  );
}