Untitled

'use client';

import TabItem from '@/components/Global/TabItem';
import TabPanel from '@/components/Global/TabPanel';
import { sportMonkUrl } from '@/lib/axios/getAxios';
import useGetUserProfile from '@/lib/hooks/useGetUserProfile';
import { useSession } from 'next-auth/react';
import { useEffect, useState } from 'react';
import FavoriteLeagues from './FavoriteLeagues';
import FavoritesMatches from './FavoritesMatches';
import FavoritesTeams from './FavoritesTeams';

export default function FavoritesHome() {
  const { data: session } = useSession();
  const { userProfile, refetchProfile } = useGetUserProfile(session);
  const [currentTab, setCurrentTab] = useState(0);
  const [favoriteLoading, setFavoriteLoading] = useState(true);
  const [favoriteMatchesData, setFavoriteMatchesData] = useState([]);

  const {
    leagues = [],
    matches = [],
    teams = [],
  } = userProfile?.favorites || {};

  const fixtureIds = matches.map((item) => item.id).join(',');

  useEffect(() => {
    const fetchData = async () => {
      try {
        if (fixtureIds.length > 0) {
          const response = await sportMonkUrl.get(
            `/fixtures/multi/${fixtureIds}?include=league.country;round.stage;participants;state;scores;periods`
          );
          if (response.status === 200) {
            setFavoriteLoading(false);
            setFavoriteMatchesData(response.data?.data);
          } else {
            throw new Error('Failed to fetch favorite matches data');
          }
        } else {
          setFavoriteLoading(false);
          setFavoriteMatchesData([]);
        }
      } catch (error) {
        setFavoriteLoading(false);
        console.error(error);
      }
    };

    if (session) {
      fetchData();
    } else {
      setFavoriteLoading(false);
    }
  }, [session, userProfile]);

  const tabs = ['Matches', 'Teams', 'Leagues'];

  const tabContents = [
    <FavoritesMatches
      key={'favorites_tab_001'}
      matches={favoriteMatchesData}
      session={session}
      favoriteLoading={favoriteLoading}
    />,
    <FavoritesTeams
      key={'favorites_tab_002'}
      teams={teams}
      session={session}
      favoriteLoading={favoriteLoading}
      refetchProfile={refetchProfile}
    />,
    <FavoriteLeagues
      key={'favorites_tab_003'}
      leagues={leagues}
      session={session}
      favoriteLoading={favoriteLoading}
      refetchProfile={refetchProfile}
    />,
  ];

  const handleTabChange = (tab) => {
    setCurrentTab(tab);
  };

  return (
    <>
      <div className="flex flex-col items-center">
        <div className="w-full relative">
          <div className=" flex gap-4 items-center h-full mx-4 absolute -top-[2.7rem] left-5">
            {tabs.map((tab, index) => (
              <TabItem
                key={index}
                tab={tab}
                onClick={() => handleTabChange(index)}
                active={currentTab === index}
                isWhite={false}
              />
            ))}
          </div>
        </div>
      </div>
      <div className="h-auto w-full">
        <div className="">
          {tabContents.map((content, index) => (
            <TabPanel
              key={index}
              content={content}
              index={index}
              currentTab={currentTab}
            />
          ))}
        </div>
      </div>
    </>
  );
}