Untitled

import Image from 'next/image';
import { BiFootball } from 'react-icons/bi';
import {
  BsFillArrowLeftCircleFill,
  BsFillArrowRightCircleFill,
} from 'react-icons/bs';

export default function Events2({ eventData, matchData, totalGoal }) {
  const awayTeam = matchData?.participants.find(
    (team) => team?.meta?.location === 'away'
  )?.id;

  const homeTeam = matchData?.participants.find(
    (team) => team?.meta?.location === 'home'
  )?.id;
  console.log('matchData', matchData);
  let newArray = [];

  eventData?.data?.events.forEach((event) => {
    const formattedEvent = {
      participant_id: event.participant_id || '',
      minute: event.minute || '',
      name: event.type.name || '',
      code: event.type.code || '',
      player: event.player_name || '',
      related_player: event.related_player_name || '',
    };

    if (
      event.type.code === 'yellowcard' ||
      event.type.code === 'redcard' ||
      event.type.code === 'substitution' ||
      event.type.code === 'VAR_CARD' ||
      event.type.code === 'goal' ||
      event.type.code === 'owngoal' ||
      event.type.code === 'VAR'
    ) {
      newArray.push(formattedEvent);
    }
  });

  const renderEvent = (event, style) => {
    switch (event.code) {
      case 'yellowcard':
        return yellowCard(event, style);
      case 'redcard':
        return redCard(event, style);
      case 'substitution':
        return substitution(event, style);
      case 'VAR':
        return VAR(event, style);
      case 'VAR_CARD':
        return VAR_CARD(event, style);
      case 'goal':
        return goal(event, style);
      case 'owngoal':
        return ownGoal(event, style);
      default:
        return null;
    }
  };

  const substitution = (event) => {
    return (
      <>
        <div className="flex flex-col gap-1 p-1">
          <BsFillArrowRightCircleFill className="text-base text-green-500" />
          <BsFillArrowLeftCircleFill className="text-base text-red-500" />
        </div>
        <div className="font-normal text-base">
          <p>{event.player}</p>
          <p>{event.related_player}</p>
        </div>
      </>
    );
  };

  const yellowCard = (event, style) => {
    return (
      <>
        <div className="bg-yellow-400 w-4 h-8 rounded flex flex-col gap-1"></div>
        <div>
          <h2 className="text-base">{event.player}</h2>
          <p className={`${style} text-sm`}>Foul</p>
        </div>
      </>
    );
  };

  const redCard = (event, style) => {
    return (
      <>
        <div className="bg-red-600 w-4 h-8 rounded flex flex-col gap-1"></div>
        <h2 className="text-base">{event.player}</h2>
        <p className={`${style} text-sm`}>Foul</p>
      </>
    );
  };

  const goal = (event, style) => {
    return (
      <>
        <BiFootball className="text-2xl" />
        <div>
          <h2 className="text-base">{event.player}</h2>
          <p className={`${style} text-sm`}>Goal</p>
        </div>
      </>
    );
  };

  const ownGoal = (event) => {
    return (
      <>
        <BiFootball className="text-base" />
        <p className="font-normal">{event.player}</p>
      </>
    );
  };

  const VAR_CARD = (event) => {
    return (
      <>
        <Image
          src="/icons/var.png"
          alt="var-logo"
          height={0}
          width={0}
          sizes="100vw"
          className="w-6 rounded-md"
        />
        <div className="font-normal">
          <p>{event.player}</p>
          <p>Goal Confirm</p>
        </div>
      </>
    );
  };

  const VAR = (event) => {
    return (
      <>
        <Image
          src="/icons/var.png"
          alt="var-logo"
          height={0}
          width={0}
          sizes="100vw"
          className="w-6 rounded-md"
        />
        <div className="font-normal">
          <p>{event.player}</p>
          <p>Goal Confirm</p>
        </div>
      </>
    );
  };

  return (
    <div className="mt-10  ">
      <div>
        <div className="bg-[#1B2435] text-center my-2 py-2">
          <h2 className="white">1st Half</h2>
          <h2>{totalGoal}</h2>
        </div>
        {newArray
          .sort((a, b) => b.minute - a.minute)
          .map((event, index) => {
            if (event.minute > 45 + Number(matchData?.periods[0]?.time_added)) {
              return (
                <div
                  key={index}
                  className=" w-full mx-auto grid grid-cols-3 items-center gap-5 px-4 h-16 mt-3"
                >
                  <div>
                    {awayTeam === event.participant_id ? (
                      <div
                        className={`flex ${
                          awayTeam === event.participant_id
                            ? 'flex-row-reverse'
                            : ''
                        } items-center justify-start w-full gap-2 p-2 col-span-1`}
                      >
                        {renderEvent(event, 'text-end')}
                      </div>
                    ) : (
                      <div className="col-span-1"></div>
                    )}
                  </div>

                  <div className="text-center col-span-1 w-16 h-16 rounded-full bg-[#061A30] justify-self-center">
                    <h4 className="mt-5">
                      {event?.minute}
                      {`'`}
                    </h4>
                  </div>

                  <div>
                    {homeTeam === event.participant_id ? (
                      <div
                        className={`flex ${
                          homeTeam === event.participant_id ? 'flex-row' : ''
                        } items-center justify-start w-full gap-2 p-2 col-span-1`}
                      >
                        {renderEvent(event, 'text-start')}
                      </div>
                    ) : (
                      <div className="col-span-1"></div>
                    )}
                  </div>
                </div>
              );
            }
          })}
      </div>
      <div>
        <div className="bg-[#1B2435] text-center my-2 py-2">
          <h2 className="white">1st Half</h2>
          <h2>{totalGoal}</h2>
        </div>
        {newArray
          .sort((a, b) => b.minute - a.minute)
          .map((event, index) => {
            if (event.minute < 45 + Number(matchData?.periods[1]?.time_added)) {
              return (
                <div
                  key={index}
                  className=" w-full mx-auto grid grid-cols-3 items-center gap-5 px-4 h-16 mt-3"
                >
                  <div>
                    {awayTeam === event.participant_id ? (
                      <div
                        className={`flex ${
                          awayTeam === event.participant_id
                            ? 'flex-row-reverse'
                            : ''
                        } items-center justify-start w-full gap-2 p-2 col-span-1`}
                      >
                        {renderEvent(event, 'text-end')}
                      </div>
                    ) : (
                      <div className="col-span-1"></div>
                    )}
                  </div>

                  <div className="text-center col-span-1 w-16 h-16 rounded-full bg-[#061A30] justify-self-center">
                    <h4 className="mt-5">
                      {event?.minute}
                      {`'`}
                    </h4>
                  </div>

                  <div>
                    {homeTeam === event.participant_id ? (
                      <div
                        className={`flex ${
                          homeTeam === event.participant_id ? 'flex-row' : ''
                        } items-center justify-start w-full gap-2 p-2 col-span-1`}
                      >
                        {renderEvent(event, 'text-start')}
                      </div>
                    ) : (
                      <div className="col-span-1"></div>
                    )}
                  </div>
                </div>
              );
            }
          })}
      </div>
    </div>
  );
}