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 ActionsSelectA() {
  const { token } = useToken();
  const {
    data: actions,
    error,
    isLoading,
  } = useSWR(`${api_endpoint}/actions?token=${token}`, fetcher);

  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: useUniqueId(),
        type: "basic",
        data: {
          action: {
            id: action.id,
            name: action.name,
            description: action.description,
            logo_url: action.logo_url,
          },
        },
        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)`,
              }}
            >
              Actions
            </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-5 flex w-screen max-w-max -translate-x-1/2 px-4">
              <div className="w-screen max-w-md flex-auto overflow-hidden rounded-3xl bg-white text-sm leading-6 shadow-lg ring-1 ring-gray-900/5 lg:max-w-3xl">
                <div className="grid grid-cols-1 gap-x-6 gap-y-1 p-4 lg:grid-cols-2">
                  {" "}
                  {actions?.length > 0 &&
                    actions.map(
                      (item: {
                        name: string;
                        description: string;
                        logo_url: string;
                        id: string;
                      }) => (
                        <div
                          key={item.name}
                          className="group relative flex gap-x-6 rounded-lg p-4 hover:bg-gray-50"
                        >
                          <div className="mt-1 flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
                            <div className="h-6 w-6" aria-hidden="true">
                              <img src={item?.logo_url || ""} />
                            </div>
                          </div>
                          <div>
                            <a className="font-semibold text-gray-900 items-start text-left">
                              {item.name}
                              <span className="absolute inset-0" />
                            </a>
                            <p className="mt-1 text-gray-600">
                              {item.description}
                            </p>
                          </div>
                        </div>
                      )
                    )}
                </div>
                <div className="bg-gray-50 py-6 px-8">
                  <div className="flex items-center gap-x-3">
                    <h3 className="text-sm font-semibold leading-6 text-gray-900">
                      Enterprise
                    </h3>
                    <p className="rounded-full bg-indigo-600/10 py-1.5 px-2.5 text-xs font-semibold text-indigo-600">
                      New
                    </p>
                  </div>
                  <p className="mt-2 text-sm leading-6 text-gray-600">
                    Empower your entire team with even more advanced tools.
                  </p>
                </div>
              </div>
            </Popover.Panel>
          </Transition>
        </>
      )}
    </Popover>
  );
}

export { ActionsSelectA };
