import { Children, PropsWithChildren } from "react";
import { motion, useAnimationControls } from "framer-motion";

import "react-loading-skeleton/dist/skeleton.css";
import * as Popover from "@radix-ui/react-popover";
import * as Toolbar from "@radix-ui/react-toolbar";

import { ReactFlowInstance, useReactFlow } from "reactflow";

import { useEffect } from "react";

import { useCurrentFlow } from "@/hooks/useCurrentFlow";
import { useToken } from "@/hooks/useToken";
import { useWording } from "@/hooks/useWording";
import { useUser } from "@/hooks/useUser";
import styles from "./toolbar.module.css";

interface FlowBarProps extends PropsWithChildren<any> {
  flow_id?: string;
  replaceFolderWith?: string | null | undefined;
  replaceFlowWith?: string | null | undefined;
  logoUrl?: string;
  reactFlowInstance: ReactFlowInstance | null;
}

function FlowBar({
  flow_id,
  logoUrl,
  reactFlowInstance,
  children,
  replaceFolderWith,
  replaceFlowWith,
}: FlowBarProps) {
  const { token } = useToken();
  const { setCurrentWording } = useWording();

  const { user, isLoading } = useUser();

  useEffect(() => {
    setCurrentWording({
      flow: replaceFlowWith || "Flow",
      folder: replaceFolderWith || "Folder",
    });
  }, []);

  const { flow } = useCurrentFlow();
  return (
    <>
      {!flow ? (
        <div>
          {/* <motion.div
            //src="https://res.cloudinary.com/dhwxfvlrn/image/upload/v1669236496/logo/E_500_500_px_2.png"
            className={styles.box}
            animate={{
              scale: [1, 1, 1, 1, 1],
              rotate: [0, 0, 180, 180, 0],
              borderRadius: ["6%", "6%", "50%", "50%", "6%"],
            }}
            transition={{
              duration: 2,
              ease: "easeInOut",
              times: [0, 0.2, 0.5, 0.8, 1],
              repeat: Infinity,
              repeatDelay: 1,
            }}
          /> */}
        </div>
      ) : (
        <>
          {token && flow?.name && !isLoading && (
            <>
              <Toolbar.Root
                className={styles.ToolbarRoot}
                aria-label="Formatting options"
              >
                {logoUrl && logoUrl !== "" && (
                  <>
                    <Popover.Root>
                      <Popover.Trigger>
                        <Toolbar.Link className={styles.ToolbarLogo}>
                          <img src={logoUrl} />
                        </Toolbar.Link>
                      </Popover.Trigger>
                    </Popover.Root>
                  </>
                )}

                {Children.count(children) > 0 && (
                  <>
                    <Popover.Root>
                      <Popover.Trigger>
                        <Toolbar.Link className={styles.ToolbarOther}>
                          {children}
                        </Toolbar.Link>
                      </Popover.Trigger>
                    </Popover.Root>
                  </>
                )}
              </Toolbar.Root>
            </>
            //) : (
            // <>
            //   {Children.count(children) > 0 && (
            //     <>
            //       <Toolbar.Root
            //         className={styles.ToolbarRoot}
            //         aria-label="Formatting options"
            //       >
            //         <Toolbar.Link className={styles.ToolbarOther}>
            //           {children}
            //         </Toolbar.Link>
            //       </Toolbar.Root>
            //     </>
            //   )}
            // </>
          )}
        </>
      )}
    </>
  );
}

export { FlowBar };
