/* eslint-disable react-hooks/exhaustive-deps */

import React, { useEffect, useMemo, useState } from 'react';
import { useParams } from 'react-router-dom';
import { getSingleScoreBoard } from '../../api/scoreApi';
import defaultAvatar from '../../assets/defaultAvatar.jpg';
import GolfScoreBoard from '../../components/GolfScoreBoard';
import Loading from '../../components/Loading';
import MatchHeaderComponent from '../../components/MatchHeader';
import { PlayerCardProps } from '../../components/PlayerCard';
import { TypeOfNotification, useNotification } from '../../context/NotificationContext';
import { Member, SingleBoard } from '../../types/score';
import './index.css';
import NoData from '../../components/NoData';

const TestPage: React.FC = () => {
	const { show } = useNotification();
	const [data, setData] = useState<SingleBoard>();
	const [loading, setLoading] = useState<boolean>(true);

	const { id } = useParams<{ id: string }>();
	const matchId = useMemo(() => {
		if (id && !isNaN(Number(id))) {
			return Number(id);
		} else {
			return null;
		}
	}, [id]);

	useEffect(() => {
		const fetchScoreBoard = async () => {
			setLoading(true);
			try {
				if (matchId) {
					const res = await getSingleScoreBoard(matchId);
					setData(res.data);
				}
			} catch (error: any) {
				show(TypeOfNotification.ERROR, error?.response?.data?.detail);
			} finally {
				setLoading(false);
			}
		};
		fetchScoreBoard();
	}, []);

	const mapToPlayerCardProps = (members: Member[]): { team1: PlayerCardProps[]; team2: PlayerCardProps[] } => {
		if (members.length === 0) {
			return { team1: [], team2: [] };
		}

		const team1: PlayerCardProps[] = members.slice(0, 1).map((player) => ({
			letterIdentify: player.letter_identity,
			vga: player.vga,
			name: player.full_name,
			hdcIndex: player.handicap_course,
			imageUrl: player.avatar || defaultAvatar,
			alightItemText: 'right',
		}));

		const team2: PlayerCardProps[] = members.slice(1, 2).map((player) => ({
			letterIdentify: player.letter_identity,
			vga: player.vga,
			name: player.full_name,
			hdcIndex: player.handicap_course,
			imageUrl: player.avatar || defaultAvatar,
			alightItemText: 'left',
		}));

		return { team1, team2 };
	};

	const { team1, team2 } = mapToPlayerCardProps(data?.front_holes?.members || []);

	return (
		<>
			{loading && <Loading />}

			{!loading && (
				<div>
					{data && (
						<>
							<MatchHeaderComponent team1={team1} team2={team2} no={1} isSingle={true} />
							<div>
								<div className="single-board-box">Hố lượt đi</div>
								<GolfScoreBoard data={data.front_holes} numberOfHoles={9} />
							</div>
							<div>
								<div className="single-board-box">Hố lượt đi</div>
								<GolfScoreBoard data={data.front_holes} numberOfHoles={9} />
							</div>
						</>
					)}
				</div>
			)}
			{(!matchId || !data) && <NoData size="large" />}
		</>
	);
};

export default TestPage;