// eslint-disable-next-line react/display-name

import React from "react";
import * as NavigationMenu from "@radix-ui/react-navigation-menu";

import { CaretDownIcon } from "@radix-ui/react-icons";
import styles from "./Menu.module.css";
import clsx from "clsx";
import { useToken } from "@/hooks/useToken";
import useSWR from "swr";
import { api_endpoint, fetcher, useUniqueId } from "../lib/utils";
import { useEdgebrix } from "@/hooks/useEdgebrix";
import { useReactFlow } from "reactflow";
const Menu = ({ callback }: { callback?: Function }) => {
  const { token } = useToken();
  const {
    data: actions,
    error,
    isLoading,
  } = useSWR(`${api_endpoint}/actions?token=${token}`, fetcher);
  1;
  const { edgebrix, setEdgebrix } = useEdgebrix();
  const { addNodes } = edgebrix || useReactFlow();
  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 (
    <NavigationMenu.Root className={styles.NavigationMenuRoot}>
      <NavigationMenu.List className={styles.NavigationMenuList}>
        <NavigationMenu.Item>
          <NavigationMenu.Trigger className={styles.NavigationMenuTrigger}>
            Learn <CaretDownIcon className={styles.CaretDown} aria-hidden />
          </NavigationMenu.Trigger>
          <NavigationMenu.Content className={styles.NavigationMenuContent}>
            <ul className={styles.List_one}>
              <li style={{ gridRow: "span 3" }}>
                <NavigationMenu.Link asChild>
                  <div className={styles.Callout}>
                    <svg
                      aria-hidden
                      width="38"
                      height="38"
                      viewBox="0 0 25 25"
                      fill="white"
                    >
                      <path d="M12 25C7.58173 25 4 21.4183 4 17C4 12.5817 7.58173 9 12 9V25Z"></path>
                      <path d="M12 0H4V8H12V0Z"></path>
                      <path d="M17 8C19.2091 8 21 6.20914 21 4C21 1.79086 19.2091 0 17 0C14.7909 0 13 1.79086 13 4C13 6.20914 14.7909 8 17 8Z"></path>
                    </svg>
                    <div className={styles.CalloutHeading}>Edgebrix.</div>
                    <p className={styles.CalloutText}>
                      Unstyled, accessible components for React.
                    </p>
                  </div>
                </NavigationMenu.Link>
              </li>

              <ListItem title="Stitches">
                CSS-in-JS with best-in-class developer experience.
              </ListItem>
              <ListItem title="Colors">
                Beautiful, thought-out palettes with auto dark mode.
              </ListItem>
              <ListItem title="Icons">
                A crisp set of 15x15 icons, balanced and consistent.
              </ListItem>
            </ul>
          </NavigationMenu.Content>
        </NavigationMenu.Item>

        <NavigationMenu.Item>
          <NavigationMenu.Trigger className={styles.NavigationMenuTrigger}>
            Overview <CaretDownIcon className={styles.CaretDown} aria-hidden />
          </NavigationMenu.Trigger>
          <NavigationMenu.Content className={styles.NavigationMenuContent}>
            <div className="relative grid gap-8 bg-white p-7 lg:grid-cols-1">
              {actions?.length > 0 &&
                actions.map(
                  (item: {
                    name: string;
                    description: string;
                    logo_url: string;
                    id: string;
                  }) => (
                    <a
                      onClick={(e) => {
                        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={
                            `https://res.cloudinary.com/dhwxfvlrn/image/fetch/w_100,h_100,f_auto,q_auto,dpr_2/${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">
                          {item.description}
                        </p>
                      </div>
                    </a>
                  )
                )}
            </div>
          </NavigationMenu.Content>
        </NavigationMenu.Item>

        <NavigationMenu.Item>
          <NavigationMenu.Link className={styles.NavigationMenuLink}>
            Github
          </NavigationMenu.Link>
        </NavigationMenu.Item>

        <NavigationMenu.Indicator className={styles.NavigationMenuIndicator}>
          <div className={styles.Arrow} />
        </NavigationMenu.Indicator>
      </NavigationMenu.List>

      <div className={styles.ViewportPosition}>
        <NavigationMenu.Viewport className={styles.NavigationMenuViewport} />
      </div>
    </NavigationMenu.Root>
  );
};

const ListItem = React.forwardRef(
  (
    {
      className,
      children,
      title,
      ...props
    }: {
      className?: string;
      children?: React.ReactNode;
      title?: string;
    },
    forwardedRef
  ) => (
    <li>
      <NavigationMenu.Link asChild>
        <a
          // className={clsx(`${styles.ListItem}`, className)}
          className={styles.ListItemLink}
          {...props}
          //ref={forwardedRef}
        >
          <div className={styles.ListItemHeading}>{title}</div>
          <p className={styles.ListItemText}>{children}</p>
        </a>
      </NavigationMenu.Link>
    </li>
  )
);

export { Menu };
