// import { ILLA_MIXPANEL_EVENT_TYPE } from "@illa-public/mixpanel-utils"
import { FC,  useMemo } from "react"
import { useSelector } from "react-redux"
import { useParams } from "react-router-dom"
import { applyViewportContainerWrapperStyle } from "./style"
import {
  getIllaMode,
  getIsILLAPreviewMode,
  getIsILLAProductMode,
} from "@/redux/config/configSelector"
import { getViewportSizeSelector } from "@/redux/currentApp/components/componentsSelector"
import {
  // getAppLoadedActions,
  // getExecutionResult,
  // getIntervalActions,
  getRootNodeExecutionResult,
} from "@/redux/currentApp/executionTree/executionSelector"
// import store from "@/store"
// import {
//   IExecutionActions,
//   registerActionPeriod,
//   removeAllActionPeriod,
//   runActionWithDelay,
//   runActionWithExecutionResult,
// } from "@/utils/action/runAction"
// import { trackInEditor } from "@/utils/mixpanelHelper"
import { RenderPage } from "./components/Page/renderPage"
import { MouseHoverProvider } from "./context/mouseHoverContext"
import { MouseMoveProvider } from "./context/mouseMoveContext"

export const DotPanel: FC = () => {
  const rootExecutionProps = useSelector(getRootNodeExecutionResult)
  // const executionResult = useSelector(getExecutionResult)
  const mode = useSelector(getIllaMode)
  const isProductionMode = useSelector(getIsILLAProductMode)
  const viewportSize = useSelector(getViewportSizeSelector)

  const isPreviewMode = useSelector(getIsILLAPreviewMode)

  const { currentPageIndex, pageSortedKey, homepageDisplayName } =
    rootExecutionProps
  const { pageName } = useParams()
  const currentDisplayName = useMemo(() => {
    if (isProductionMode) {
      return (
        pageName ||
        homepageDisplayName ||
        pageSortedKey[currentPageIndex] ||
        "page1"
      )
    } else {
      return pageSortedKey[currentPageIndex] || homepageDisplayName
    }
  }, [
    currentPageIndex,
    homepageDisplayName,
    isProductionMode,
    pageName,
    pageSortedKey,
  ])

  // const canRenders =   !!executionResult.root;
  // if (!rootExecutionProps) return null

  return (
    <MouseHoverProvider>
      <MouseMoveProvider>
        <div
          css={applyViewportContainerWrapperStyle(
            mode,
            isPreviewMode ? viewportSize.viewportWidth : undefined,
            isPreviewMode ? viewportSize.viewportHeight : undefined,
          )}
        >
          <RenderPage
            key={currentDisplayName}
            currentPageDisplayName={currentDisplayName}
          />
        </div>
      </MouseMoveProvider>
    </MouseHoverProvider>
  )
}

DotPanel.displayName = "DotPanel"
