import RelayResults from "./pages/RelayResults/RelayResults"
import StageLayout from "../../components/Layout/StageLayout.tsx"
import { useFetchClasses } from "../../../../shared/hooks.ts"
import { BottomNavigationAction, Box } from "@mui/material"
import EmojiEventsIcon from "@mui/icons-material/EmojiEvents"
import ResultTabs from "../../components/ResultTabs.tsx"
import { useTranslation } from "react-i18next"
import { Person } from "@mui/icons-material"
import { useQuery } from "react-query"
import { ProcessedRunnerModel } from "../../../../components/VirtualTicket/shared/EntityTypes.ts"
import { AxiosError } from "axios"
import { RunnerModel } from "../../../../../../shared/EntityTypes.ts"
import { useParams } from "react-router-dom"
import { useCallback, useMemo } from "react"
import RelayLegs from "./pages/RelayLegs/RelayLegs.tsx"
import { getRelayRunnersByClass, getRelayRunnersByClub } from "./services/RelayService.ts"
import { RESULTS_QUERY } from "../../shared/constants.ts"
import { checkIfEventTimezoneMatchesUser } from "../../../../../../shared/timezoneFunctions.ts"
import { DateTime } from "luxon"
import { useFetchStageDetail } from "../../../../services/FetchHooks.ts"

const menu_options_labels = ["results", "legs"]

export default function Relay() {
  const { t } = useTranslation()

  // Get stage's and event's ids
  const { eventId, stageId } = useParams()
  if (!eventId || !stageId) {
    throw new Error("Event Id or Stage Id is missing")
  }

  const { data: stageData, eventData } = useFetchStageDetail(eventId, stageId, {
    staleTime: Infinity,
  })

  const timezoneMatch = useMemo(() => {
    if (!stageData?.start || !eventData?.timezone) {
      return true
    }

    return checkIfEventTimezoneMatchesUser(DateTime.fromISO(stageData.start), eventData.timezone)
  }, [stageData?.start, eventData?.timezone])

  // Fetch classes and clubs
  const {
    activeItem,
    classesQuery,
    clubsQuery,
    isClass,
    setClassClubId,
    refresh: refreshClassesClubs,
  } = useFetchClasses()

  // Fetch runners
  const runnersQueryByClasses = useQuery<ProcessedRunnerModel[], AxiosError<RunnerModel[]>>(
    [eventId, stageId, "results", "classes", activeItem?.id],
    () =>
      activeItem
        ? getRelayRunnersByClass(eventId, stageId, activeItem.id)
        : Promise.reject(new Error("No active class")),
    {
      ...RESULTS_QUERY,
      enabled: !!activeItem && isClass && !!classesQuery.data,
    },
  )

  const runnersQueryByClubs = useQuery<ProcessedRunnerModel[], AxiosError<RunnerModel[]>>(
    [eventId, stageId, "results", "clubs", activeItem?.id],
    () =>
      activeItem
        ? getRelayRunnersByClub(eventId, stageId, activeItem?.id)
        : Promise.reject(new Error("No active club")),
    {
      ...RESULTS_QUERY,
      enabled: !!activeItem && !isClass && !!classesQuery.data,
    },
  )

  const handleRefreshClick = useCallback(() => {
    refreshClassesClubs()
    if (isClass) {
      void runnersQueryByClasses.refetch()
    } else {
      void runnersQueryByClubs.refetch()
    }
  }, [isClass, refreshClassesClubs, runnersQueryByClasses, runnersQueryByClubs])

  return (
    <Box sx={{ px: 2, height: "100%" }}>
      <StageLayout
        key={"stageLayout"}
        activeItem={activeItem}
        isClass={isClass}
        classesQuery={classesQuery}
        clubsQuery={clubsQuery}
        setActiveClassClub={setClassClubId}
        handleRefreshClick={handleRefreshClick}
        displayTimezoneMsg={!timezoneMatch}
        isFetching={runnersQueryByClasses.isFetching || runnersQueryByClasses.isFetching}
      >
        <ResultTabs
          defaultMenu={0}
          menuOptions={[
            <BottomNavigationAction
              key={"relayResults"}
              label={t("StageHeader.Results")}
              icon={<EmojiEventsIcon />}
            />,
            <BottomNavigationAction
              key={"RogaineScorePointsMenu"}
              label={t("StageHeader.RelayLegs")}
              icon={<Person />}
            />,
          ]}
          menuOptionsLabels={menu_options_labels}
        >
          <RelayResults
            runnersQuery={isClass ? runnersQueryByClasses : runnersQueryByClubs}
            activeItem={activeItem}
            isClass={isClass}
            setClassClubId={setClassClubId}
          />
          <RelayLegs
            runnersQuery={isClass ? runnersQueryByClasses : runnersQueryByClubs}
            activeItem={activeItem}
            isClass={isClass}
          />
        </ResultTabs>
      </StageLayout>
    </Box>
  )
}
