import React, {
  ReactNode,
  createContext,
  useContext,
  useEffect,
  useState,
} from "react";

import {
  FTTracking,
  ConfigType,
  reactPlayerTracking,
  TrackingOptions,
} from "@phntms/ft-lib";

import { useRouter as usePagesRouter } from "next/router";

type ContextProps = {
  FTTracker: FTTracking | undefined;
  pageViewData: ConfigType | undefined;
  setPageViewData: (value: ConfigType) => void;
  permutiveContentType: string | undefined;
  setPermutiveContentType: (value: string) => void;
  trackingOptions: TrackingOptions | undefined;
  setTrackingOptions: (value: TrackingOptions) => void;
  videoTracker: reactPlayerTracking | undefined;
};

interface ProviderProps {
  children?: ReactNode;
}

const FTTrackerContext = createContext<ContextProps>({} as ContextProps);

const FTTrackerProvider = ({ children }: ProviderProps) => {
  const [FTTracker, setFTTracker] = useState<FTTracking>();
  const [videoTracker, setVideoTracker] = useState<reactPlayerTracking>();
  const [pageViewData, setPageViewData] = useState<ConfigType>();
  const [permutiveContentType, setPermutiveContentType] = useState<string>();
  const [trackingOptions, setTrackingOptions] = useState<TrackingOptions>();

  //Setup tracker
  useEffect(() => {
    if (!pageViewData) return;
    if (!FTTracker) {
      //still need to dynamically import because of o-tracking ESM(?) module in ft-lib
      import("@phntms/ft-lib")
        .then(({ FTTracking, reactPlayerTracking }) => {
          const tracker = new FTTracking(
            pageViewData as ConfigType,
            trackingOptions && {
              ...trackingOptions,
            }
          );
          setFTTracker(tracker);
          setVideoTracker(
            new reactPlayerTracking(
              tracker,
              pageViewData.videoName || pageViewData.articleName,
              ""
            )
          );
        })
        .catch(console.log);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [FTTracker, pageViewData, trackingOptions]);

  useEffect(() => {
    if (!pageViewData) return;

    /*Fire permutive pageEvent for both server and client load (PageView is updated only once during both route types)
     - it doesn't depend on the dynamic Origami tracker so can fire from this single effect
      (pageView is always present on fresh session) */
    const permutiveType =
      permutiveContentType || pageViewData?.contentType || "Home";
    const pageEvent = {
      page: {
        type: `Partner Content ${permutiveType}`,
      },
    };
    if (window.permutive) {
      window.permutive.addon("web", pageEvent);
    }

    if (!FTTracker) return;
    //fire client Origami pageView - this is only for client routes as FTTracker is always loading last (constructor fires a pageEvent) so a server route will return above.
    FTTracker.newPageView(pageViewData as unknown as ConfigType);

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [pageViewData]);

  return (
    <FTTrackerContext.Provider
      value={{
        FTTracker,
        pageViewData,
        setPageViewData,
        trackingOptions,
        setTrackingOptions,
        permutiveContentType,
        setPermutiveContentType,
        videoTracker,
      }}
    >
      {children}
    </FTTrackerContext.Provider>
  );
};

const useFTTracker = () => useContext(FTTrackerContext);

export { FTTrackerProvider, useFTTracker };