import { classNames, useUniqueId } from "@/components/lib/utils";
import { useEdgebrix } from "@/hooks/index";
import { EllipsisVerticalIcon } from "@heroicons/react/20/solid";
import clsx from "clsx";
import { useState } from "react";
import { Handle, Position, useReactFlow } from "reactflow";
import { WebhookDialog } from "./WebhookDialog";
import styles from "./WebhookNode.module.css";

function WebhookNode({ data }: { data: any }) {
  const action = data.action;

  const { edgebrix, setEdgebrix } = useEdgebrix();

  const [openNewActionDialog, setOpenNewActionDialog] = useState(false);

  return (
    <>
      <WebhookDialog
        open={openNewActionDialog}
        setOpen={setOpenNewActionDialog}
      />
      <div
        onClick={() => {
          setOpenNewActionDialog(true);
        }}
        key={useUniqueId()}
        className={clsx(
          styles.NodeBackgournd,
          "justify-center bg-transparent w-16 h-16 relative flex items-center space-x-3  px-2 py-5 shadow-sm"
        )}
      >
        <div className="flex relative">
          <img
            className="h-10 w-10 rounded-full"
            src={`https://res.cloudinary.com/dhwxfvlrn/image/fetch/w_100,h_100,f_auto,q_auto,dpr_2/${action.logo_url}`}
            alt=""
          />
        </div>
      </div>

      <Handle type="source" position={Position.Right} id="a" />
    </>
  );
}

export { WebhookNode };
