import { useConfirm } from "@/components/confirm/hooks/useConfirm";
import { LoadingText } from "@/components/loading";
import Tooltip from "@/components/Tooltip";
import { ConvertJSONToFormData, ServerRequest } from "@/lib/actions";
import { cn } from "@/lib/utils";
import { ProjectStatusMap } from "@/models/projects/statusMap";
import disableDomain from "@/services/projects/disableDomain";
import { socket } from "@/socket";
import dayjs from "dayjs";
import { useEffect, useState, useTransition } from "react";
import { toast } from "sonner";

type TableHeaderStatusProps = {
  row: any;
  dict?: Dictionary;
};
export default function Status({ row, dict }: TableHeaderStatusProps) {
  const { confirm } = useConfirm();

  const [toggling, setToggling] = useState(false);
  const [_, startTransition] = useTransition();

  const isRedirected = row.redirectsTo !== "not redirected";

  const handleToggleClick = async () => {
    const isConfirmed = await confirm();
    if (!isConfirmed) return;

    setToggling(true);
    startTransition(async () => {
      const { name } = row;

      const promise = new Promise(async (resolve, reject) => {
        const formData = ConvertJSONToFormData({
          name,
          isRedirected,
        });
        const result = await ServerRequest(disableDomain(formData));

        if (!result.operation) {
          setToggling(false);
          return reject(result);
        }

        socket.emit("toggle-project-status", {
          name,
          redirectsTo: isRedirected
            ? "not redirected"
            : "https://federalgovadvisors.com/",
        });

        return resolve(result);
      });

      toast.promise(promise, {
        loading: dict.alerts.toggle_project_status.loading,
        description: dayjs().format("MMM DD, YYYY HH:MM:ss"),
        success: ({ message }: any) => (
          <>
            <p>
              {message}
              <br />
              <span className="text-xs text-gray-500">
                {dict.alerts.toggle_project_status.success_important}
              </span>
            </p>
          </>
        ),
        error: ({ message }: any) => message,
      });
    });
  };

  useEffect(() => {
    setToggling(false);
  }, [row]);

  return (
    <div className="mx-auto w-full text-center">
      <Tooltip content={row.status ? "Disable" : "Enable"}>
        <p
          className={cn(
            `w-full cursor-pointer rounded-full bg-green-600 px-3 py-1 text-xs text-white`,
            {
              "!bg-red-600": isRedirected,
              "!bg-yellow-600": row.status === ProjectStatusMap.PENDING,
              "!bg-blue-500": toggling,
            },
          )}
          onClick={handleToggleClick}
        >
          {toggling ? (
            <LoadingText noText />
          ) : (
            dict.pages.general[isRedirected ? "inactive" : "active"]
          )}
        </p>
      </Tooltip>
    </div>
  );
}