Untitled

'use client';

import SkewCard from '@/components/Global/SkewCard';
import TabItem from '@/components/Global/TabItem';
import TabPanel from '@/components/Global/TabPanel';
import TopLeaguesList from '@/components/Global/TopLeaguesList';
import Image from 'next/image';
import { useState } from 'react';
import { IoStar, IoStarOutline } from 'react-icons/io5';
import TeamMatches from './TeamMatches';
import TeamOverview from './TeamOverview';
import TeamSquad from './TeamSquad';

export default function TeamDetails({ teamDetails, teamId }) {
  console.log(teamDetails);
  // const activeSeasons = teamDetails?.activeseasons;
  const [currentTab, setCurrentTab] = useState(0);
  const [isFavorite, setIsFavorite] = useState(false);

  // const { data: session } = useSession();

  const tabs = ['Overview', 'Matches', 'Squad'];

  const tabContents = [
    <TeamOverview
      key={'team_details_tab_001'}
      teamDetails={teamDetails}
      teamId={teamId}
    />,
    <TeamMatches
      key={'team_details_tab_002'}
      teamDetails={teamDetails}
      teamId={teamId}
    />,
    <TeamSquad
      key={'team_details_tab_003'}
      teamDetails={teamDetails}
      teamId={teamId}
    />,
  ];

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

  // const handleFavoriteClick = async (event, teamDetails) => {
  //   event.preventDefault();

  //   // Remove extra fields
  //   const { activeseasons, coaches, upcoming, latest, ...teamInfo } =
  //     teamDetails;

  //   if (session) {
  //     const favoriteData = {
  //       email: session.user?.email,
  //       key: 'teams',
  //       item: teamInfo,
  //     };

  //     const { data } = await xoomBackendUrl.put(
  //       '/api/user/favorites',
  //       favoriteData
  //     );

  //     if (data.status) {
  //       setIsStarClicked(!isStarClicked);
  //       toast.success('Match added to favorite');
  //     } else {
  //       toast.error('Error');
  //     }
  //   } else {
  //     toast.error('Please login first');
  //   }
  // };

  return (
    <div className="max-w-screen-xl mx-auto">
      <div className="grid grid-cols-12 gap-5">
        <div className="col-span-0 md:col-span-3"></div>
        <div className="col-span-12 md:col-span-9 w-full px-5">
          <div className="flex items-center justify-between w-full py-6">
            <div className="flex items-center">
              <Image
                src={teamDetails?.image_path}
                alt="team-logo"
                height={0}
                width={0}
                sizes="100vw"
                className="w-16 h-16 ring-1 ring-gray-100 mr-4 rounded-full bg-white"
              />

              <div className="text-white">
                <p className="text-2xl select-none">{teamDetails?.name}</p>
                <p className="text-base font-light select-none">
                  {teamDetails?.country?.name}
                </p>
              </div>
            </div>
            <div className="flex items-center gap-5">
              <button>
                {isFavorite ? (
                  <IoStar
                    onClick={() => setIsFavorite(false)}
                    className="text-2xl text-yellow-500"
                  />
                ) : (
                  <IoStarOutline
                    onClick={() => setIsFavorite(true)}
                    className="text-2xl text-white"
                  />
                )}
              </button>
            </div>
          </div>
          <div className="flex items-center justify-start gap-5 my-5">
            {tabs.map((tab, index) => (
              <TabItem
                key={index}
                tab={tab}
                onClick={() => handleTabChange(index)}
                active={currentTab === index}
                isWhite={false}
              />
            ))}
          </div>
        </div>
      </div>

      <div className="grid grid-cols-12 gap-5">
        <div className="col-span-3">
          <SkewCard title="POPULAR LEAGUES">
            <TopLeaguesList />
          </SkewCard>
        </div>
        <div className="col-span-9 flex flex-col items-center my-3">
          <div className="h-auto w-full pb-3">
            {tabContents.map((content, index) => (
              <TabPanel
                key={index}
                content={content}
                index={index}
                currentTab={currentTab}
              />
            ))}
          </div>
        </div>
      </div>
      {/* Select Season Modal */}
      {/* <SelectSeasonModal activeSeasons={activeSeasons} /> */}
    </div>
  );
}