import React, { useContext, useEffect, useState } from "react";
import { useParams, useNavigate, useLocation } from "react-router-dom";
import { Box, Paper, Grid } from "@mui/material";
import SessionView from "./components/SessionView";
import { getEventLevel } from "../../../components/utils";
import EventEntryList from "./components/entries/EventEntryList";
import Summary from "./components/summary/Summary";
import HeatList from "./components/heats/HeatList";
import { GET_SESSION_EVENTS } from "../../../utils/graphql/queries";
import { ROUND_HEAT_STATUS_SUBSCRIPTION } from "../../../utils/graphql/subscriptions";
import { GET_HEAT_LIST } from "../../../utils/graphql/queries";
import useFetch from "../../../hooks/graphql/useFetch";
import EventHeader from "./components/EventHeader";
import { getView } from "../../../components/utils/getView";
import CombinedResults from "./components/combined/CombinedResults";
import useCombinedResults from "../../../hooks/useCombinedResults";
import useConditionalSub from "../../../hooks/graphql/useConditionalSub";
import { CompetitionDetailsContext } from "../../../context/CompetitionDetailsContext";

interface EventViewProps {
  competition: Competition | undefined;
  session: CompetitionSession | undefined;
  setSelectedSession: React.Dispatch<
    React.SetStateAction<CompetitionSession | undefined>
  >;
  setSessionTabIndex: React.Dispatch<React.SetStateAction<number>>;
  timeProgramEntryId: number | undefined;
  setTimeProgramEntryId: React.Dispatch<
    React.SetStateAction<number | undefined>
  >;
  eventView: View;
  setEventView: React.Dispatch<React.SetStateAction<View>>;
  isCompetitionActive: boolean;
}

const findEventView = (eventView: string | undefined): View => {
  switch (eventView as View) {
    case "entries":
      return "entries";
    case "heats":
      return "heats";
    case "summary":
      return "summary";
    case "combined":
      return "combined";
    default:
      return "entries";
  }
};

export default function EventView({
  competition,
  isCompetitionActive,
  session,
  setSelectedSession,
  setSessionTabIndex,
  timeProgramEntryId,
  setTimeProgramEntryId,
  eventView,
  setEventView,
}: EventViewProps) {
  const competitionId = competition?.id;
  const combinedGroup = competition?.combined_group;
  const showAge = competition?.show_age;
  const poolType = competition?.pool_type;
  const sessions = competition?.competition_sessions;
  const combinedType = competition?.combined_type;

  const params = useParams();
  const navigate = useNavigate();
  const location = useLocation();

  const {
    loading,
    error,
    data,
    refresh: refetch,
  } = useFetch<TimeProgramEntry[]>(
    GET_SESSION_EVENTS,
    { _id: session?.id },
    "_id",
    "cache-and-network"
  );

  const { data: heatData } = useFetch<TimeProgramEntry>(
    GET_HEAT_LIST,
    { id: timeProgramEntryId },
    );

  const [eventId, setEventId] = useState<number | undefined>(undefined);
  const [selectedEventViewTab, setSelectedEventViewTab] = useState<number>(0);
  const [tpes, setTpes] = useState<TimeProgramEntry[]>([]);
  const [selectedTpe, setSelectedTpe] = useState<TimeProgramEntry | undefined>(
    undefined
  );
  const [tpeFinal, setTpeFinal] = useState<boolean>(false);
  const [eventLevel, setEventLevel] = useState<number>(0);
  const [showOfficialTimeStamp, setShowOfficialTimeStamp] =
    useState<boolean>(false);
  const [roundStatus, setRoundStatus] = useState<number | undefined>(undefined);
  const [summaryTypes, setSummaryTypes] = useState<SummaryType[] | undefined>(
    selectedTpe?.round?.summary_types
  );

  useEffect(() => {
    setSelectedTpe(data ? data[0] : undefined);
  }, [data])

  const { shouldSubscribe } = useContext(CompetitionDetailsContext);

  const handleStatusClick = () => {
    if (showOfficialTimeStamp) {
      setShowOfficialTimeStamp(false);
    } else setShowOfficialTimeStamp(true);
  };

  useEffect(() => {
    if (data) {
      //INFO: avoid error if query only returns one tpe as an object
      if (!Array.isArray(data)) {
        try {
          let arr = [] as TimeProgramEntry[];
          arr.push(data);
          setTpes(arr);
          setSelectedTpe(data);
        } catch (err) {
          console.log(err);
        }
      } else {
        try {
          setTpes(data);
          const foundTpe = data.find((tpe) => tpe?.id === timeProgramEntryId);
          foundTpe && setSelectedTpe(foundTpe);
        } catch (err) {
          console.log(err);
        }
      }
    }
  }, [data]);

  useEffect(() => {
    if (selectedTpe) {
      setTimeProgramEntryId(selectedTpe?.id);
    }
  }, [selectedTpe]);

  useEffect(() => {
    refetch();
  }, [timeProgramEntryId]);

  const {
    data: roundHeatSubData,
    isActive,
    endSub,
  } = useConditionalSub<Round>(
    ROUND_HEAT_STATUS_SUBSCRIPTION,
    { id: selectedTpe?.round?.id },
    !(isCompetitionActive && !!selectedTpe?.round?.id) /* || !shouldSubscribe */
  );

  useEffect(() => {
    if (roundHeatSubData?.status) {
      setRoundStatus(roundHeatSubData?.status);
    }
  }, [roundHeatSubData]);

  /* CHECK AND SET COMPETITION-/EVENT LEVEL (SHOW/DON'T SHOW RANK) */
  useEffect(() => {
    if (selectedTpe) {
      setEventLevel(
        getEventLevel(selectedTpe?.round?.event?.event_competition_level)
      );
      setSummaryTypes(selectedTpe?.round?.summary_types);
    }
  }, [selectedTpe, timeProgramEntryId]);

  useEffect(() => {
    if (selectedTpe?.round?.sort_order && selectedTpe?.round?.sort_order >= 2) {
      setTpeFinal(true);
    } else {
      setTpeFinal(false);
    }
  }, [selectedTpe]);

  // useEffect(() => {
  //   const foundEventView: View = findEventView(params?.eventView);
  //   const parsedSession = Number(params.session);
  //   const foundSession = sessions?.find(
  //     (session) => session.oid === parsedSession
  //   );
  //   const parsedTpe = Number(params.tpe);
  //   const foundTpe = foundSession?.time_program_entries?.find(
  //     (tpe) => tpe?.oid === parsedTpe
  //   );

  //   if (location?.state?.tpeCard && selectedTpe?.round) {
  //     switch (selectedTpe?.round?.status) {
  //       case 0:
  //         setEventView("entries");
  //         setSelectedEventViewTab(0);
  //         navigate(
  //           `../competitions/${params.competitionName}/events/entries/${session?.oid}/${selectedTpe?.oid}`
  //         );
  //         break;
  //       case 1:
  //       case 3:
  //         setEventView("heats");
  //         setSelectedEventViewTab(1);
  //         navigate(
  //           `../competitions/${params.competitionName}/events/heats/${session?.oid}/${selectedTpe?.oid}`
  //         );
  //         break;
  //       case 5:
  //         setEventView("summary");
  //         setSelectedEventViewTab(2);
  //         navigate(
  //           `../competitions/${params.competitionName}/events/summary/${session?.oid}/${selectedTpe?.oid}`
  //         );
  //         break;
  //     }
  //   } else if (params.eventView && params.session && params.tpe) {
  //     if (foundEventView && foundSession && foundTpe) {
  //       //console.log('found event view, session and tpe');
  //       const foundSessionIndex = sessions?.findIndex(
  //         (session) => session?.id === foundSession?.id
  //       );
  //       foundSessionIndex && setSessionTabIndex(foundSessionIndex);
  //       setEventView(foundEventView);
  //       setSelectedEventViewTab(getView.AsIndex(foundEventView));
  //       setSelectedSession(foundSession);
  //       setTimeProgramEntryId(foundTpe?.id);
  //       setEventId(foundTpe?.round?.event?.id);
  //       navigate(
  //         `../competitions/${params.competitionName}/events/${foundEventView}/${foundSession?.oid}/${foundTpe?.oid}`
  //       );
  //     } else {
  //       //TODO: if no view in params, check tpe status to decide between entries, heats and summary
  //       //console.log('eventView, session & tpe: did not find event view');
  //       setEventView("entries");
  //       setSelectedEventViewTab(0);
  //       sessions &&
  //         sessions[0].time_program_entries &&
  //         setTimeProgramEntryId(sessions[0]?.time_program_entries[0]?.id);
  //       sessions &&
  //         sessions[0].time_program_entries &&
  //         navigate(
  //           `../competitions/${params.competitionName}/events/entries/${sessions[0]?.oid}/${sessions[0]?.time_program_entries[0]?.oid}`
  //         );
  //     }
  //   } else if (params.eventView && params.session) {
  //     const foundEventView: View = findEventView(params?.eventView);
  //     const parsedSession = Number(params.session);
  //     const foundSession = sessions?.find(
  //       (session) => session?.oid === parsedSession
  //     );
  //     if (foundEventView && foundSession) {
  //       //console.log('found event view and session');
  //       setEventView(foundEventView);
  //       setSelectedEventViewTab(getView.AsIndex(foundEventView));
  //       foundSession?.time_program_entries &&
  //         setTimeProgramEntryId(foundSession?.time_program_entries[0]?.id);
  //       foundSession?.time_program_entries &&
  //         setEventId(foundSession?.time_program_entries[0]?.round?.event?.id);
  //       foundSession?.time_program_entries &&
  //         navigate(
  //           `../competitions/${params.competitionName}/events/${foundEventView}/${foundSession.oid}/${foundSession?.time_program_entries[0]?.oid}`
  //         );
  //     } else {
  //       //console.log('eventView & session: did not find event view');
  //       setEventView("entries");
  //       setSelectedEventViewTab(0);
  //       navigate(
  //         `../competitions/${params.competitionName}/events/entries/${session?.oid}/${selectedTpe?.oid}`
  //       );
  //     }
  //   } else {
  //     setEventView("entries");
  //     setSelectedEventViewTab(0);
  //     sessions &&
  //       sessions[0].time_program_entries &&
  //       setTimeProgramEntryId(sessions[0]?.time_program_entries[0]?.id);
  //     sessions &&
  //       sessions[0].time_program_entries &&
  //       setEventId(sessions[0]?.time_program_entries[0]?.round?.event?.id);
  //     sessions &&
  //       sessions[0].time_program_entries &&
  //       navigate(
  //         `../competitions/${params.competitionName}/events/entries/${sessions[0]?.oid}/${sessions[0]?.time_program_entries[0]?.oid}`
  //       );
  //   }
  // }, [eventView, timeProgramEntryId, params.eventView]);

  useEffect(() => {
    return () => {
      endSub();
    };
  }, []);
  
  const handleEventViewChange = (e: React.ChangeEvent, newValue: number) => {
    setSelectedEventViewTab(newValue);
    localStorage.setItem('lastVisitedTab', String(newValue));
    navigate(
      `../competitions/${params.competitionName}/events/${getView.AsView(
        newValue as 0 | 1 | 2 | 3
      )}/${session?.oid}/${selectedTpe?.oid}`
    );
  };

  // Handle default view settings
  useEffect(() => {
    // if a view is selected by the user then keep that view as default, else execute the logic below ...
    if(eventView === "entries" && selectedEventViewTab === 0) {
      setEventView("entries")
      setSelectedEventViewTab(0); 
    }
    if(eventView && selectedEventViewTab) {
      return
    }
    if (selectedTpe && selectedTpe.round) {
      const status = selectedTpe?.round?.status;
      const hasHeats = heatData?.heats !== undefined || heatData?.heats !== null ? true : false;
  
      if (status === 5) {
        // If status is 5, set default view to "summary" and selected tab to 2
        setEventView("summary");
        setSelectedEventViewTab(2);
      } 
      else if(hasHeats) {
        // If round is "heat", set default view to "heats" and selected tab to 1
        setEventView("heats");
        setSelectedEventViewTab(1);
      } 
      else {
        // If status is not 5 and round is not "heat", set default view to "entries" and selected tab to 0
        setEventView("entries");
        setSelectedEventViewTab(0);
      }
    }
  }, [selectedTpe]);

  useEffect(() => {
    const lastVisitedTab = localStorage.getItem('lastVisitedTab');
    const defaultView = eventView || 'entries';
    const defaultTab = lastVisitedTab ? parseInt(lastVisitedTab) : 0;
    
    // Check if a view is already selected by the user
    if (!eventView && selectedEventViewTab === 0) {
      setEventView(defaultView);
      setSelectedEventViewTab(defaultTab);
    }
  }, [eventView, selectedEventViewTab]);

  const sponsorImg = selectedTpe?.round?.event?.sponsor?.img;
  const sponsorLink = selectedTpe?.round?.event?.sponsor?.link;
  const sponsorText = selectedTpe?.round?.event?.sponsor?.name;

  const eventNumber = selectedTpe?.round?.event?.number;
  const roundType = selectedTpe?.round?.round_type;

  const {
    combinedData: competitions,
    unsub,
    restartSub,
    lanes,
    loading: combinedLoading,
    error: combinedError,
    setSelectedAgeGroup,
    selectedAgeGroup,
    setAgeGroupTabIndex,
    ageGroupTabIndex,
  } = useCombinedResults(
    combinedGroup,
    eventNumber,
    roundType,
    combinedType,
    isCompetitionActive && eventView === "combined",
    eventView
  );

  return (
    <>
      <Grid container>
        <Grid item xs={4}>
          <Paper
            elevation={3}
            sx={{
              position: "sticky",
              maxHeight: "100vh",
              overflowY: "scroll",
              "&::-webkit-scrollbar": { display: "none" },
              top: "1px",
            }}
          >
            {session && (
              <SessionView
                competitionId={competitionId}
                session={session}
                time_program_entries={tpes}
                setEventId={setEventId}
                setSelectedTpe={setSelectedTpe}
                time_programId={timeProgramEntryId}
                setSummaryTypes={setSummaryTypes}
              />
            )}
          </Paper>
        </Grid>
        <Grid item xs={8} sx={{ bgcolor: "" }}>
          <Box ml={1} sx={{ bgcolor: "" }}>
            <EventHeader
              combinedCompetitions={competitions}
              combinedGroup={combinedGroup}
              eventView={eventView}
              eventId={selectedTpe?.round?.event?.id}
              selectedEventViewTab={selectedEventViewTab}
              setEventView={setEventView}
              handleEventViewChange={handleEventViewChange}
              handleStatusClick={handleStatusClick}
              selectedTpe={selectedTpe}
              sponsorImg={sponsorImg}
              showOfficialTimeStamp={showOfficialTimeStamp}
              setShowOfficialTimeStamp={setShowOfficialTimeStamp}
              sponsorLink={sponsorLink}
              sponsorText={sponsorText}
              roundStatus={roundStatus}
              tpeFinal={tpeFinal}
              isActive={isActive}
            />

            {selectedTpe?.type === 1 && (
              <Grid item xs={12} mx={0} mt={1} mb={2} sx={{ bgcolor: "" }}>
                {eventView === "entries" && (
                  <EventEntryList
                    competitionId={competitionId}
                    event={selectedTpe?.round?.event}
                    round={selectedTpe?.round}
                    time_programId={selectedTpe?.id}
                    tpeFinal={tpeFinal}
                    eventLevel={eventLevel}
                    showAge={showAge}
                    competitionPoolType={poolType}
                    sortByName={
                      selectedTpe.round?.event?.entry_list_types?.[0] &&
                      selectedTpe.round?.event?.entry_list_types?.[0]
                        .sort_by_name
                    }
                  />
                )}
                {eventView === "heats" && (
                  <HeatList
                    eventView={eventView}
                    eventType={selectedTpe.round?.event?.event_type}
                    roundHeatSubData={roundHeatSubData}
                    isCompetitionActive={isCompetitionActive}
                    timeProgramEntry={selectedTpe}
                    round={selectedTpe?.round}
                    time_programId={selectedTpe?.id}
                    eventLevel={eventLevel}
                    showAge={showAge}
                    superliveSeo={session?.superlive_seo_link}
                  />
                )}
                {eventView === "summary" &&
                  summaryTypes &&
                  summaryTypes?.length > 0 && (
                    <Summary
                      eventView={eventView}
                      roundHeatSubData={roundHeatSubData}
                      roundStatus={selectedTpe?.round?.status}
                      isCompetitionActive={isCompetitionActive}
                      summary_types={summaryTypes}
                      time_programId={selectedTpe?.id}
                      eventLevel={eventLevel}
                      showAge={showAge}
                    />
                  )}
                {eventView === "combined" && (
                  <CombinedResults
                    restartSub={restartSub}
                    unsub={unsub}
                    ageGroupTabIndex={ageGroupTabIndex}
                    selectedAgeGroup={selectedAgeGroup}
                    setAgeGroupTabIndex={setAgeGroupTabIndex}
                    setSelectedAgeGroup={setSelectedAgeGroup}
                    loading={combinedLoading}
                    error={combinedError}
                    eventLevel={eventLevel}
                    showAge={showAge}
                    compId={competitionId}
                    competitions={competitions}
                    lanes={lanes}
                  />
                )}
              </Grid>
            )}
          </Box>
        </Grid>
      </Grid>
    </>
  );
}