import { Variant, AnimatePresence, m } from "framer-motion";
import React from "react";

const SwitchableComponentContext = React.createContext<
  SwitchableComponentContextType | undefined
>(undefined);

export const SwitchableComponentProvider = ({
  children,
}: React.PropsWithChildren) => {
  const [visibleComponent, setVisibleComponent] =
    React.useState<SwitchableComponentType>();

  return (
    <SwitchableComponentContext.Provider
      value={{
        visibleComponent: visibleComponent ?? DEFAULT_COMPONENT,
        setVisibleComponent,
      }}>
      {children}
    </SwitchableComponentContext.Provider>
  );
};

export function useSwitchableComponent(initialValue?: SwitchableComponentType) {
  const contextValue = React.useContext(SwitchableComponentContext);

  if (contextValue === undefined) {
    throw new Error(
      "useSwitchableComponent hook is being used outside of its context. Please ensure that it is wrapped within a <SwitchableComponentProvider>.",
    );
  }
  React.useEffect(() => {
    // Set the initial value if it's provided
    if (initialValue && contextValue.visibleComponent) {
      contextValue.setVisibleComponent(initialValue);
    }
  }, [initialValue]);

  return contextValue;
}

const variants: Record<string, Variant> = {
  hidden: { y: 50, opacity: 0, position: "absolute" },
  show: {
    y: 0,
    x: 0,
    opacity: 1,
    position: "relative",
    transition: {
      type: "tween",
      ease: "easeInOut",
    },
  },
  exit: { y: -50, opacity: 0, position: "absolute" },
};

export const SwitchableComponent = ({
  children,
  index,
}: React.PropsWithChildren<{ index: string }>) => {
  const [width, setWidth] = React.useState<number>();
  return (
    <AnimatePresence>
      <m.div
        key={index}
        initial="hidden"
        animate="show"
        exit="exit"
        variants={variants}
        className="h-full w-full"
        style={{ maxWidth: width ?? "auto" }}
        onTransitionEnd={(e) =>
          setWidth(e.currentTarget.getBoundingClientRect().width!)
        }>
        {children}
      </m.div>
    </AnimatePresence>
  );
};

type SwitchableComponentType<T extends {} = {}> = {
  index: string;
  render: (props: T | any) => ReturnType<React.FC>;
};

type SwitchableComponentContextType<T = unknown> = {
  visibleComponent: SwitchableComponentType<T extends {} ? T : any>;
  setVisibleComponent: React.Dispatch<
    React.SetStateAction<
      SwitchableComponentType<T extends {} ? T : any> | undefined
    >
  >;
};

const DEFAULT_COMPONENT = {
  render: () => undefined,
  index: Symbol("DEFAULT_COMPONENT").toString(),
};

// Factory function
export function makeSwitchable<T extends {}>(
  Component: React.FC<T>,
  index: string,
) {
  return {
    render(props: T) {
      return <Component {...props} />;
    },
    index: index || Symbol(Component.name).toString(),
  };
}