import { LeftOutlined } from '@ant-design/icons';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import TeamMatchBackground from '../../assets/teamMatchBackground.png';
import { routeLink } from '../../Router';
import PlayerCard, { PlayerCardProps } from '../PlayerCard';

export interface MatchProps {
	team1: PlayerCardProps[];
	team2: PlayerCardProps[];
	no: number;
	isSingle?: boolean;
}

const MatchHeaderComponent: React.FC<MatchProps> = ({ team1, team2, no, isSingle = false }) => {
	const { t } = useTranslation();
	const navigate = useNavigate();
	const renderTeam = (team: PlayerCardProps[]) => (
		<div
			style={{
				display: 'flex',
				flexDirection: 'column',
				gap: '10px',
				alignItems: team[0].alightItemText !== 'left' ? 'start' : 'end',
			}}
		>
			{team.map((player, index) => (
				<PlayerCard key={index} {...player} />
			))}
		</div>
	);

	const calculateHandicapDifference = () => {
		const team1Hdc = team1.reduce((sum, player) => sum + player.hdcIndex, 0);
		const team2Hdc = team2.reduce((sum, player) => sum + player.hdcIndex, 0);
		return Math.abs(team1Hdc - team2Hdc); 
	};

	return (
		<div
			style={{
				borderRadius: '15px',
				padding: '20px',
				backgroundColor: '#E8F5E9',
				boxShadow: '0px 4px 6px rgba(0,0,0,0.1)',
				width: '100%',
				backgroundImage: `url(${TeamMatchBackground})`,
				backgroundSize: 'cover',
			}}
		>
			<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', marginBottom: '10px' }}>
				<LeftOutlined onClick={() => navigate(routeLink.tournament)} style={{ cursor: 'pointer', fontSize: '16px', marginLeft: '5px', marginRight: '5px' }} />
				<h3 style={{ color: '#2E7D32', fontSize: '20px' }}>
					{t('matchPage.matchNo')} {no}
				</h3>
			</div>
			<div style={{ display: 'flex', justifyContent: 'space-around', alignItems: 'center', paddingLeft: '100px', paddingRight: '100px' }}>
				<div style={{ flex: '1' }}>{renderTeam(team1)}</div>
				<div style={{fontSize: 20, display: 'flex', flexDirection: 'column', alignItems:'center'}}>
					<div style={{ fontWeight: 'bold', fontSize: '24px', color: '#FF8F00', width: 'fit-content' }}>VS</div>
                    {isSingle && <div style={{fontSize: 20}}> {t('matchPage.bet')} {calculateHandicapDifference()}</div>}
				</div>
				<div style={{ flex: '1' }}>{renderTeam(team2)}</div>
			</div>
		</div>
	);
};

export default MatchHeaderComponent;