import React from 'react';
import GameRow from './GameRow';
import ActorPopover from './ActorPopover';

export default function GameGrid({ grid, width, middle }) {
    return (
        <div className="game-grid-area">
            <div className="hint-col">
                {grid.map((row, rowIndex) => {
                    if (row.separator !== undefined) {
                        return <div key={rowIndex} className="hint-separator" />;
                    }
                    return (
                        <div key={rowIndex} className="hint-cell">
                            <ActorPopover hintType={row.hintType} hintText={row.hintText} />
                        </div>
                    );
                })}
            </div>
            <div className="game-grid-scroll">
                <table id="actors">
                    <tbody>
                        {grid.map((row, rowIndex) => {
                            if (row.separator !== undefined) {
                                return (
                                    <tr key={rowIndex} className="separator-row">
                                        {Array.from({ length: middle }, (_, i) => (
                                            <td key={i} />
                                        ))}
                                        <td className="letter-static separator-char">
                                            {row.separator === ' ' ? '' : row.separator}
                                        </td>
                                        {Array.from({ length: width - middle }, (_, i) => (
                                            <td key={middle + 1 + i} />
                                        ))}
                                    </tr>
                                );
                            }

                            return (
                                <GameRow
                                    key={rowIndex}
                                    actorName={row.actorName}
                                    pos={row.pos}
                                    colStart={middle - row.pos}
                                    totalWidth={width}
                                />
                            );
                        })}
                    </tbody>
                </table>
            </div>
        </div>
    );
}