import { __ } from "@wordpress/i18n";
import { cn } from "@/lib/utils";
import { Dot } from "lucide-react";
import { Button, buttonVariants } from "../ui/button";
import { RiCheckLine, RiDownloadLine } from "react-icons/ri";
import { Badge } from "../ui/badge";
import { toast } from "sonner";
import { useNotification } from "@/hooks/app.hooks";

const IntegrationCard = ({ item, className }) => {
  const { updateNotice } = useNotification();

  const deactivate = async (item) => {
    await fetch(WCF_ADDONS_ADMIN.ajaxurl, {
      method: "POST",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        Accept: "application/json",
      },

      body: new URLSearchParams({
        action: "wcf_deactive_plugin",
        action_base: item.basename,
        nonce: WCF_ADDONS_ADMIN.nonce,
      }),
    })
      .then((response) => {
        return response.json();
      })
      .then((return_content) => {
        if (return_content?.success) {
          toast.success(return_content?.data, {
            position: "top-right",
          });

          const date = new Date();
          const utcDate = date.toISOString();

          const sampleData = {
            type: "notice",
            title: __("Integration Status", "animation-addons-for-elementor"),
            description:
              __("You have successfully deactivated Animation Addon Pro", "animation-addons-for-elementor"),
            date: utcDate,
          };

          updateNotice(sampleData);

          window.location.reload();
        }
      });
  };

  const activePlugin = async () => {
    await fetch(WCF_ADDONS_ADMIN.ajaxurl, {
      method: "POST",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        Accept: "application/json",
      },

      body: new URLSearchParams({
        action: "wcf_active_plugin",
        action_base: "animation-addons-for-elementor-pro/animation-addons-for-elementor-pro",
        nonce: WCF_ADDONS_ADMIN.nonce,
      }),
    })
      .then((response) => {
        return response.json();
      })
      .then((return_content) => {
        if (return_content?.success) {
          toast.success(return_content?.message, {
            position: "top-right",
          });

          const date = new Date();
          const utcDate = date.toISOString();

          const sampleData = {
            type: "notice",
            title: __("Integration Status", "animation-addons-for-elementor"),
            description:
              __("You have successfully activated Animation Addon Pro", "animation-addons-for-elementor"),
            date: utcDate,
          };

          updateNotice(sampleData);

          window.location.reload();
        }
      });
  };
  return (
    <div
      className={cn(
        "flex items-center justify-between gap-3 px-4 py-[15px] bg-background shadow-common-2 box-border",
        className
      )}
    >
      {item ? (
        <>
          <div className="flex flex-col gap-1">
            <div className="flex items-center">
              <h2 className="text-[15px] leading-6">{item?.label}</h2>
              {item?.is_pro ? (
                <>
                  <Dot
                    className="w-3.5 h-3.5 text-icon-secondary"
                    strokeWidth={2}
                  />
                  <Badge variant="pro">{__("PRO", "animation-addons-for-elementor")}</Badge>
                </>
              ) : (
                ""
              )}
            </div>
            <div className="flex items-center">
              <a
                href={item?.doc_url}
                className="text-sm text-label hover:text-text cursor-pointer"
              >
                {__("Documentation", "animation-addons-for-elementor")}
              </a>
              <Dot
                className="w-3.5 h-3.5 text-icon-secondary"
                strokeWidth={2}
              />
              <a
                href={item?.demo_url}
                aria-disabled="true"
                className="text-sm text-[#CACFD8] hover:text-text pointer-events-none "
              >
                {__("Preview", "animation-addons-for-elementor")}
              </a>
            </div>
          </div>
          <div>
            {item?.is_pro ? (
              item.action === "Activated" ? (
                <Button
                  className="h-9 py-2 ps-[10px] pe-3 bg-[#CFFFE6] text-[#108D4B] hover:bg-[#CFFFE6] hover:text-[#108D4B]"
                  onClick={() => deactivate(item)}
                >
                  <RiCheckLine size={18} className="mr-1.5" />
                  {__("Activated", "animation-addons-for-elementor")}
                </Button>
              ) : (
                <Button
                  className="h-9 py-2 ps-[10px] pe-3 "
                  onClick={() => activePlugin()}
                >
                  <RiCheckLine size={18} className="mr-1.5" />
                  {__("Deactivated", "animation-addons-for-elementor")}
                </Button>
              )
            ) : item.action === "Activated" ? (
              <Button
                className="h-9 py-2 ps-[10px] pe-3 bg-[#CFFFE6] text-[#108D4B] hover:bg-[#CFFFE6] hover:text-[#108D4B]"
                onClick={() => deactivate(item)}
              >
                <RiCheckLine size={18} className="mr-1.5" />
                {__("Activated", "animation-addons-for-elementor")}
              </Button>
            ) : (
              <a
                href={item.download_url}
                target="_blank"
                className={cn(
                  buttonVariants({ variant: "secondary" }),
                  "h-9 py-2 ps-[10px] pe-3"
                )}
              >
                <RiDownloadLine size={18} className="mr-1.5" />
                {__("Download", "animation-addons-for-elementor")}
              </a>
            )}
          </div>
        </>
      ) : (
        ""
      )}
    </div>
  );
};

export default IntegrationCard;