import { useEdgebrix } from "@/hooks/useEdgebrix";
import { useToken } from "@/hooks/useToken";
import { Popover, Transition } from "@headlessui/react";
import { ChevronDownIcon } from "@heroicons/react/20/solid";
import { Fragment, useEffect } from "react";
import { useReactFlow } from "reactflow";
import useSWR from "swr";
import { api_endpoint, fetcher, useUniqueId } from "../lib/utils";

// const solutions = [
//   {
//     name: "Insights",
//     description: "Measure actions your users take",
//     href: "##",
//     icon: IconOne,
//   },
// ]
import { useStore } from "@/hooks/useEdg";

function TriggersSelect() {
  const { token } = useToken();

  const triggers = [
    {
      name: "Webhook",
      description: "Webhooks can accept data (or JSON) to kick off a workflow.",
      logo_url:
        "https://res.cloudinary.com/dhwxfvlrn/image/upload/f_auto,q_auto,dpr_2/icons/webhook.png",
      id: "trigger_node",
    },
  ];

  // const { edgebrix, setEdgebrix } = useEdgebrix();
  // const { addNodes } = edgebrix || useReactFlow();
  const { addNodes } = useStore();
  const addAction = (action: {
    name: string;
    description: string;
    logo_url: string;
    id: string;
  }) => {
    console.log(">>>>", action);
    addNodes([
      {
        id: "trigger_node",
        type: "webhook",
        data: {
          action,
        },
        position: { x: 0, y: 0 },
      },
    ]);
  };

  return (
    <Popover className="relative">
      {({ open }) => (
        <>
          <Popover.Button
            className={`
                ${open ? "" : "text-opacity-90"}
                group inline-flex items-center rounded-md bg-orange-700 px-3 py-2 text-base font-medium text-white hover:text-opacity-100 focus:outline-none    `}
          >
            <span
              style={{
                fontFamily: `var(--edgebrix-font-family)`,
                fontSize: `var(--edgebrix-font-size)`,
              }}
            >
              Triggers
            </span>
            <ChevronDownIcon
              className={`${open ? "" : "text-opacity-70"}
                  ml-2 h-5 w-5 text-orange-300 transition duration-150 ease-in-out group-hover:text-opacity-80`}
              aria-hidden="true"
            />
          </Popover.Button>
          <Transition
            as={Fragment}
            enter="transition ease-out duration-200"
            enterFrom="opacity-0 translate-y-1"
            enterTo="opacity-100 translate-y-0"
            leave="transition ease-in duration-150"
            leaveFrom="opacity-100 translate-y-0"
            leaveTo="opacity-0 translate-y-1"
          >
            <Popover.Panel className="absolute left-1/2 z-10 mt-3 w-screen max-w-sm -translate-x-1/2 transform px-4 sm:px-0 lg:max-w-sm">
              <div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
                <div className="relative grid gap-8 bg-white p-7 lg:grid-cols-1">
                  {triggers?.length > 0 &&
                    triggers.map(
                      (item: {
                        name: string;
                        description: string;
                        logo_url: string;
                        id: string;
                      }) => (
                        <div
                          onClick={() => {
                            addAction({
                              ...item,
                            });
                          }}
                          key={useUniqueId()}
                          className="-m-3 flex items-center rounded-lg p-2 transition duration-150 ease-in-out hover:bg-gray-50 focus:outline-none focus-visible:ring focus-visible:ring-orange-500 focus-visible:ring-opacity-50"
                        >
                          <div className="flex h-10 w-10 shrink-0 items-center justify-center text-white sm:h-12 sm:w-12">
                            <img src={item?.logo_url || ""} />
                          </div>
                          <div className="ml-4">
                            <p className="text-sm font-medium text-gray-900 text-left">
                              {item.name}
                            </p>
                            <p className="text-sm text-gray-500 text-left">
                              {item.description}
                            </p>
                          </div>
                        </div>
                      )
                    )}
                </div>
                {/* <div className="bg-gray-50 p-4">
                  <a
                    href="##"
                    className="flow-root rounded-md px-2 py-2 transition duration-150 ease-in-out hover:bg-gray-100 focus:outline-none focus-visible:ring focus-visible:ring-orange-500 focus-visible:ring-opacity-50"
                  >
                    <span className="flex items-center">
                      <span className="text-sm font-medium text-gray-900">
                        Documentation
                      </span>
                    </span>
                    <span className="block text-sm text-gray-500 text-left">
                      Start integrating products and tools
                    </span>
                  </a>
                </div> */}
              </div>
            </Popover.Panel>
          </Transition>
        </>
      )}
    </Popover>
  );
}

export { TriggersSelect };
