import {
  Dispatch,
  ReactNode,
  SetStateAction,
  createContext,
  useContext,
  useEffect,
  useReducer,
  useState,
} from "react";

import Lightbox from "yet-another-react-lightbox";

import {
  Captions,
  Download,
  Fullscreen,
  Slideshow,
  Thumbnails,
  Zoom,
} from "yet-another-react-lightbox/plugins";
import "yet-another-react-lightbox/plugins/captions.css";
import "yet-another-react-lightbox/plugins/thumbnails.css";
import "yet-another-react-lightbox/styles.css";

interface IScreenProps {
  children: ReactNode;
}

interface IScreenContext {
  isMobile: boolean;
  isSmallDesktop: boolean;
  setIsOpen: Dispatch<SetStateAction<boolean>>;
  setCurrentDoc: Dispatch<SetStateAction<number>>;
  setGalleryState: Dispatch<SetStateAction<any[]>>;
  galleryState: any[];
  screenWidth: number;
  menuOnView: any;
  setMenuOnView: Dispatch<SetStateAction<boolean>>;
  openMenu: any;
  menuStack: any;
  goBack: any;
  isStandalone: any;
  resetMenu: any;
  setOnDrawer: Dispatch<SetStateAction<boolean>>;
  onDrawer: boolean;
}

const ScreenContext = createContext({} as IScreenContext);
type MenuComponent = JSX.Element;

type MenuState = MenuComponent[];

type MenuAction =
  | { type: "PUSH"; component: MenuComponent }
  | { type: "POP" }
  | { type: "RESET" };

const menuReducer = (state: MenuState, action: MenuAction): MenuState => {
  switch (action.type) {
    case "PUSH":
      return [...state, action.component];
    case "POP":
      return state.length > 1 ? state.slice(0, -1) : state;
    case "RESET":
      return [];
    default:
      return state;
  }
};
export const ScreenProvider = ({ children }: IScreenProps) => {
  const [isMobile, setIsMobile] = useState(false);
  const [isSmallDesktop, setIsSmallDesktop] = useState(false);
  const [isStandalone, setIsStandalone] = useState(false);
  const [onDrawer, setOnDrawer] = useState(false);
  const [galleryState, setGalleryState] = useState<
    { src: string; name: string }[]
  >([]);
  // const [galleryState, setGalleryState] = useState<any[]>([
  //   { src: "string", name: "string" },
  // ]);
  const [isOpen, setIsOpen] = useState(false);
  const [menuOnView, setMenuOnView] = useState<boolean>(false);

  const [currentDoc, setCurrentDoc] = useState(0);

  const [screenWidth, setScreenWidth] = useState(0);

  const [menuStack, dispatch] = useReducer(menuReducer, []);

  const openMenu = (component: MenuComponent) => {
    dispatch({ type: "PUSH", component });
    setMenuOnView(true);
  };
  const goBack = () => dispatch({ type: "POP" });
  const resetMenu = () => {
    dispatch({ type: "RESET" });
    setMenuOnView(false);
  };
  // const [scale, setScale] = useState(1);
  // const [origin, setOrigin] = useState("0px 0px");

  // const handleScale = (newVal: any) => {
  //   setScale((prevScale) => {
  //     let newScale = prevScale + newVal * 0.001;
  //     return newScale < 1 ? 1 : newScale > 20 ? 20 : newScale;
  //   });
  // };

  // https://yet-another-react-lightbox.com/plugins

  useEffect(() => {
    const updateMenuView = () => {
      const windowSize = window.innerWidth;
      setIsMobile(windowSize <= 640);
      setIsSmallDesktop(windowSize <= 768);
      setScreenWidth(windowSize);
      setIsStandalone(window.matchMedia("(display-mode: standalone)").matches);
    };
    updateMenuView();

    window.addEventListener("resize", updateMenuView);

    // Cleanup function to remove event listener when component unmounts
    return () => {
      window.removeEventListener("resize", updateMenuView);
    };
  }, []);

  return (
    <ScreenContext.Provider
      value={{
        isMobile,
        isSmallDesktop,
        setIsOpen,
        menuStack,
        setCurrentDoc,
        setGalleryState,
        galleryState,
        screenWidth,
        isStandalone,
        setOnDrawer,
        menuOnView,
        setMenuOnView,
        openMenu,
        goBack,
        resetMenu,
        onDrawer,
      }}
    >
      {children}
      <Lightbox
        open={isOpen}
        close={() => setIsOpen(false)}
        plugins={[Captions, Fullscreen, Slideshow, Thumbnails, Zoom, Download]}
        slides={galleryState}
        inline={{
          style: { width: "100%", maxWidth: "80vw", aspectRatio: "3 / 2" },
        }}
        zoom={{
          // animationDuration: 500,
          maxZoomPixelRatio: 20,
          zoomInMultiplier: 2,
          doubleTapDelay: 300,
          doubleClickDelay: 300,
          doubleClickMaxStops: 2,
          keyboardMoveDistance: 50,
          wheelZoomDistanceFactor: 100,
          pinchZoomDistanceFactor: 100,
          scrollToZoom: true,
        }}
        styles={{ container: { backgroundColor: "rgba(0, 0, 0, 0.7)" } }}
        index={currentDoc}
      />

    </ScreenContext.Provider>
  );
};

export const useScreenContext = () => {
  return useContext(ScreenContext);
};