import { Flex } from '@mantine/core';
import React from 'react';
import { BracketMaps } from '../utils/bracket-maps';
import { BracketRound } from './bracket-round';
import { Match } from '../types';

interface BracketViewProps {
  bracket: Match[][];
  bracketMaps: BracketMaps;
  onAnnounce?: (teamOne: any, teamTwo: any) => void;
}

const BracketView: React.FC<BracketViewProps> = ({
  bracket,
  bracketMaps,
  onAnnounce,
}) => {

  const getParentMatchOrder = (parentLid: number): number | string => {
    const parentMatch = bracketMaps.matchByLid.get(parentLid);
    if (
      parentMatch &&
      parentMatch.order !== null &&
      parentMatch.order !== undefined
    ) {
      return parentMatch.order;
    }
    return `Match ${parentLid}`;
  };

  return (
    <Flex direction="row" gap={24} justify="left" pos="relative" p="xl">
      {bracket.map((round, roundIndex) => (
        <BracketRound
          key={roundIndex}
          matches={round}
          roundIndex={roundIndex}
          getParentMatchOrder={getParentMatchOrder}
          onAnnounce={onAnnounce}
        />
      ))}
    </Flex>
  );
};

export default BracketView;