import { useBlockProps } from '@wordpress/block-editor';
import { ExternalLink } from '@wordpress/components';

/**
 * The save function defines the way in which the different attributes should
 * be combined into the final markup, which is then serialized by the block
 * editor into `post_content`.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#save
 *
 * @return {WPElement} Element to render.
 */
export default function save( { attributes } ) {
	const blockProps = useBlockProps.save();
	return (
		<div { ...blockProps } data-tournament-id={ attributes.tournament_id }>
			{attributes.data?.players && attributes.data?.standings && (
				<table id="tournament-results-table">
					<thead>
					<tr>
						<th>Place</th>
						<th>Player</th>
						<th>Points</th>
					</tr>
					</thead>
					<tbody>
					{Object.keys(attributes.data.standings).map((player, i) => {
						return (
							<tr key={player}>
								<td>{attributes.data.standings[i].position}</td>
								<td>{attributes.data.players.find(p => p.playerId === attributes.data.standings[i].playerId).name}</td>
								<td>{attributes.data.standings[i].points}</td>
							</tr>
						);
					})}
					</tbody>
				</table>
			)}

			{/* <ExternalLink href={ `https://next.matchplay.events/tournaments/${ attributes.tournament_id }/standings` }>
				Full Results on Matchplay
			</ExternalLink> */}
		</div>
	);
}