Untitled

'use client';
import { useAppContext } from '@/contexts/XoomAppContent';
import Image from 'next/image';
import Link from 'next/link';
import { BiStar } from 'react-icons/bi';
import MatchCard2 from './MatchCard2';

export default function FixtureList2() {
  const {
    checkLive,
    fixturesData,
    isLoadingFixtures,
    isRefetching,
    refetchFixtures,
  } = useAppContext();

  const liveStatus = [
    'INPLAY_1ST_HALF',
    'INPLAY_2ND_HALF',
    'HT',
    'INPLAY_ET',
    'INPLAY_ET_2ND_HALF',
    'BREAK',
    'PEN_BREAK',
    'EXTRA_TIME_BREAK',
    'INPLAY_PENALTIES',
  ];

  const liveMatches = fixturesData?.flatMap((league) =>
    league.fixtures.filter((match) => liveStatus.includes(match?.state?.state))
  );

  // Filter live matches based on the isLive status
  function filterLiveFixturesAndRemoveEmpty(leagues, liveStatus) {
    return leagues
      ?.map((league) => {
        const liveFixtures = league.fixtures.filter((fixture) =>
          liveStatus.includes(fixture.state?.state)
        );
        return { ...league, fixtures: liveFixtures };
      })
      .filter((league) => league.fixtures.length > 0);
  }

  const leaguesWithLiveFixtures = filterLiveFixturesAndRemoveEmpty(
    fixturesData,
    liveStatus
  );

  const finalFixtures = fixturesData?.sort((a, b) => a.id - b.id);

  const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
  console.log('finalFixtures', finalFixtures);
  if (isLoadingFixtures || isRefetching) {
    return (
      <div className="mt-3 mb-2 px-4">
        <div className="grid grid-cols-12 gap-1">
          {arr.map((shimmer) => (
            <>
              <div className="col-span-1 h-12 w-12 bg-[#1B2435] animate-pulse rounded-md"></div>
              <div className="col-span-8 h-12 w-full bg-[#1B2435] animate-pulse rounded-md "></div>
              <div className="col-span-2 h-12 w-full bg-[#1B2435] animate-pulse rounded-md"></div>
              <div className="col-span-1 h-12 w-full animate-pulse flex items-center justify-center">
                <BiStar className="text-xl text-[#1B2435]" />
              </div>
            </>
          ))}
        </div>
      </div>
    );
  }

  return (
    <>
      {checkLive ? (
        <>
          {liveMatches.length === 0 && (
            <div className="p-10">
              <div className="px-20">
                <Image
                  src="/vector_matches_fav.png"
                  alt="team one"
                  height={0}
                  width={0}
                  sizes="100vw"
                  className="w-full"
                />
              </div>
              <p className="text-center font-semibold text-[14px]">
                UNFORTUNATELY, THERE ARE NO LIVE MATCHES HAPPENING AT THE
                MOMENT. PLEASE CHECK BACK LATER. SEE YOU SOON!
              </p>
            </div>
          )}
          <div className="rounded-2xl border border-blue-400 my-5 py-4">
            <div>
              {/* card section */}
              {leaguesWithLiveFixtures?.map((league) => (
                <div key={league.id} className="">
                  {/* card title */}
                  <div className="flex justify-between items-center p-3">
                    <div className="flex items-center gap-3 ">
                      <div>
                        <Image
                          src={league?.image}
                          alt="team two"
                          height={0}
                          width={0}
                          sizes="100vw"
                          className="w-6 h-6 rounded-full"
                        />
                      </div>
                      <div className="text-white text-sm ">
                        <h2>{league?.name}</h2>
                        <p>{league?.fixtures?.[0].league?.country?.name}</p>
                      </div>
                    </div>
                    <div>
                      <Link href="/">
                        <Image
                          src="/images/down (1).png"
                          alt="team two"
                          height={0}
                          width={0}
                          sizes="100vw"
                          className="w-4 h-4"
                        />
                      </Link>
                    </div>
                  </div>
                  {/* card body  */}
                  {league?.fixtures?.map((match) => (
                    <MatchCard2
                      key={match.id}
                      match={match}
                      refetchFixtures={refetchFixtures}
                    />
                  ))}
                </div>
              ))}
            </div>
          </div>{' '}
        </>
      ) : (
        <>
          <div className="rounded-2xl border border-blue-400 my-5 py-4">
            {finalFixtures?.map((league) => (
              <div key={league.id} className="">
                {/* card title */}
                <div className="flex justify-between items-center p-3">
                  <div className="flex items-center gap-3 ">
                    <div>
                      <Image
                        src={league?.image}
                        alt="team two"
                        height={0}
                        width={0}
                        sizes="100vw"
                        className="w-6 h-6 rounded-full"
                      />
                    </div>
                    <div className="text-white text-sm ">
                      <h2>{league?.name}</h2>
                      <p>{league?.fixtures?.[0].league?.country?.name}</p>
                    </div>
                  </div>
                  <div>
                    <Link href="/">
                      <Image
                        src="/images/down (1).png"
                        alt="team two"
                        height={0}
                        width={0}
                        sizes="100vw"
                        className="w-4 h-4"
                      />
                    </Link>
                  </div>
                </div>
                {/* card body  */}
                {league?.fixtures?.map((match) => (
                  <MatchCard2
                    key={match.id}
                    match={match}
                    refetchFixtures={refetchFixtures}
                  />
                ))}
              </div>
            ))}
          </div>
        </>
      )}
    </>
  );
}