import { JSXElement, createSignal, onMount, useContext } from "solid-js";

import { LoginContext } from "../../Context/GlobalState";
import { EngagementIcon } from "../../Util/Icons";
import { engage, getEngagementCount } from "../../Util/api";

export default function EngagementButton(props: {
  postId: string;
}): JSXElement {
  const [engagementCount, setEngagementCount] = createSignal(0);
  const login_ctx = useContext(LoginContext)!;

  onMount((): void => {
    void setUp();
  });

  const setUp = async (): Promise<void> => {
    const r = await getEngagementCount(props.postId);
    setEngagementCount(r);
  };

  // Function to handle engagement
  const handleEngagement = async (): Promise<void> => {
    try {
      const response = await engage(props.postId, login_ctx.token());
      if (response.ok) {
        // Update engagement count if the request is successful
        setEngagementCount(await response.json());
      } else {
        console.error("Failed to engage:", response.statusText);
      }
    } catch (error) {
      console.error("Error engaging:", error);
    }
  };

  return (
    <div class="flex p-1">
      <button
        class="rounded-base btn btn-xs hover:border-primary"
        aria-label="Show sign of engagement"
        onClick={handleEngagement} // Call handleEngagement function on button click
      >
        <EngagementIcon />
      </button>
      <span class="text-1xl countdown px-1.5 pt-1.5 text-center">
        <p style={{ "--value": engagementCount() }} />
      </span>
    </div>
  );
}