Untitled

'use client';

import TabItem from '@/components/Global/TabItem';
import TabPanel from '@/components/Global/TabPanel';
import { convertTimestampToFormattedDate } from '@/lib/helpers/convertTimestampToFormattedDate';
import { getCurrentGoals } from '@/lib/helpers/getCurrentGoals';
import getSlugify from '@/lib/helpers/getSlugify';
import Image from 'next/image';
import Link from 'next/link';
import { useState } from 'react';
import { CiYoutube } from 'react-icons/ci';
import { FaFacebookF } from 'react-icons/fa';
import { HiOutlineVideoCamera } from 'react-icons/hi';
import { IoLogoInstagram } from 'react-icons/io5';
import MatchHead2Head from './MatchHead2Head';
import MatchLineup from './MatchLineup';
import MatchPreview from './MatchPreview';
import MatchStandings from './MatchStandings';
import MatchStats from './MatchStats';
import MatchSummary2 from './MatchSummary2';

export default function MatchDetails({ status, matchData }) {
  console.log(matchData);
  const [currentTab, setCurrentTab] = useState(0);
  const liveStatus = [
    'INPLAY_1ST_HALF',
    'INPLAY_2ND_HALF',
    'HT',
    'INPLAY_ET',
    'INPLAY_ET_2ND_HALF',
    'BREAK',
    'PEN_BREAK',
    'EXTRA_TIME_BREAK',
    'INPLAY_PENALTIES',
  ];
  const finishedStatus = ['FT', 'AET', 'FT_PEN'];
  const upcomingStatus = [
    'TBA',
    'NS',
    'WO',
    'ABANDONED',
    'CANCELLED',
    'AWARDED',
    'INTERRUPTED',
    'POSTPONED',
  ];
  const matchState = matchData.state?.state;
  const isLive = liveStatus.includes(matchState);
  const isUpcoming = upcomingStatus.includes(matchState);
  const isFinished = finishedStatus.includes(matchState);
  const { tOne, tTwo } = getCurrentGoals(matchData?.scores);
  const formattedDate = convertTimestampToFormattedDate(
    matchData?.starting_at_timestamp
  );
  const goalFormate = `${tOne}-${tTwo}`;

  const homeTeam = matchData?.participants?.find(
    (team) => team.meta.location === 'home'
  );

  const awayTeam = matchData?.participants?.find(
    (team) => team.meta.location === 'away'
  );

  const tabs =
    status === 'preview'
      ? ['Preview', 'Standings', 'Head-2-Head']
      : ['Info', 'Summary', 'Stats', 'Line-up', 'Standings', 'Head-2-Head'];

  const tabContents =
    status === 'preview'
      ? [
          <MatchPreview key={'match_details_tab_01'} matchData={matchData} />,
          <MatchStandings key={'match_details_tab_02'} matchData={matchData} />,
          <MatchHead2Head key={'match_details_tab_03'} matchData={matchData} />,
        ]
      : [
          <MatchPreview key={'match_details_tab_04'} matchData={matchData} />,
          <MatchSummary2
            key={'match_details_tab_05'}
            matchData={matchData}
            totalGoal={goalFormate}
          />,
          <MatchStats key={'match_details_tab_06'} matchData={matchData} />,
          <MatchLineup key={'match_details_tab_07'} matchData={matchData} />,
          <MatchStandings key={'match_details_tab_08'} matchData={matchData} />,
          <MatchHead2Head key={'match_details_tab_09'} matchData={matchData} />,
        ];

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

  return (
    <div className="max-w-screen-xl mx-auto">
      <div className="flex flex-col items-start justify-between ">
        <div className="bg-[#1B2435] w-full ">
          <div className="h-full p-2 lg:p-4">
            <div className="grid grid-cols-3 justify-items-center">
              <div></div>
              <h2 className="text-gray-500 text-center text-xl py-4 ">
                {matchData?.league?.name}
              </h2>
              <div className="flex items-center justify-end gap-2 px-1 justify-self-end">
                <HiOutlineVideoCamera className="text-2xl " />
                <div>
                  <Image
                    src="/icons/star_black.png"
                    alt="Star logo"
                    width={20}
                    height={20}
                  />
                </div>
              </div>
            </div>
            <div className="flex items-center justify-between w-full">
              <div className="grid grid-cols-9 items-center justify-center w-full">
                <div className=""></div>
                <div></div>
                <Link
                  href={`/team/${getSlugify(homeTeam.name)}/${homeTeam?.id}`}
                  className="flex items-center justify-end col-span-2"
                >
                  <h4 className="text-white font-semibold uppercase mx-4">
                    {homeTeam?.name}
                  </h4>
                  <Image
                    src={homeTeam?.image_path}
                    alt={homeTeam?.name}
                    height={0}
                    width={0}
                    sizes="100vw"
                    className="w-8 h-8 8  rounded-full"
                  />
                </Link>

                <div className="h-20 w-20 rounded-full bg-[#061626] mx-auto flex items-center justify-center text-sm">
                  {isLive && (
                    <div className="relative flex flex-col items-center text-white">
                      <span>{matchData?.periods?.slice(-1)[0]?.minutes}</span>
                      <span className="absolute -top-2 -right-1 text-secondary animate-pulse text-xl">
                        {`"`}
                      </span>
                      <span className="font-semibold">{goalFormate}</span>
                    </div>
                  )}

                  {isFinished && (
                    <span className="font-semibold text-base">
                      {goalFormate}
                    </span>
                  )}

                  {isUpcoming && (
                    <div className="text-center">
                      <span className="font-semibold">{formattedDate}</span>
                    </div>
                  )}
                </div>

                <Link
                  href={`/team/${getSlugify(awayTeam.name)}/${awayTeam?.id}`}
                  className="flex items-center col-span-2"
                >
                  <Image
                    src={awayTeam?.image_path}
                    alt={awayTeam?.name}
                    height={0}
                    width={0}
                    sizes="100vw"
                    className="w-8 h-8  mr-4 rounded-full "
                  />
                  <h4 className="text-white font-semibold uppercase">
                    {awayTeam?.name}
                  </h4>
                </Link>
                <div></div>
              </div>
            </div>
            <h2 className="text-gray-500 text-center text-xl py-4">84"</h2>
          </div>
        </div>
      </div>
      <div className="flex items-center justify-between py-2">
        <div className="flex items-start justify-start gap-5 mt-3 text-gray-500 font-normal">
          {tabs.map((tab, index) => (
            <TabItem
              key={index}
              tab={tab}
              onClick={() => handleTabChange(index)}
              active={currentTab === index}
              isWhite={false}
            />
          ))}
        </div>
        <div className="flex justify-end gap-4 pe-3">
          <Link
            href="/"
            className="w-6 h-6 rounded-full flex justify-center items-center ring-1 ring-blue-500 text-white  hover:text-secondary"
          >
            <FaFacebookF className="text-sm" />
          </Link>
          <Link
            href="/"
            className="w-6 h-6 rounded-full flex justify-center items-center ring-1 ring-blue-500 text-white  hover:text-secondary"
          >
            <IoLogoInstagram className="text-base" />
          </Link>
          <Link
            href="/"
            className="w-6 h-6 rounded-full flex justify-center items-center ring-1 ring-blue-500 text-white  hover:text-secondary"
          >
            <CiYoutube className="text-base" />
          </Link>
          <Link
            href="/"
            className="w-6 h-6 rounded-full flex justify-center items-center ring-1 ring-blue-500 text-white  hover:text-secondary"
          >
            <CiYoutube className="text-base" />
          </Link>
        </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>
    </div>
  );
}