import React from "react";

import "./BoardPieces.css";
import { useStyles } from './Styles.js';

const Road = ({ color, onClick }) => {
  const classes = useStyles();
  return <div className="Road" onClick={() => onClick('road')}><div className={['Shape', classes[color]].join(' ')}/></div>;
}

const Settlement = ({ color, onClick }) => {
  const classes = useStyles();
  return <div className="Settlement" onClick={() => onClick('settlement')}><div className={['Shape', classes[color]].join(' ')}/></div>;
}

const City = ({ color, onClick }) => {
  const classes = useStyles();
  return <div className="City" onClick={() => onClick('city')}><div className={['Shape', classes[color]].join(' ')}/></div>;
}

const BoardPieces = ({ player, onClick }) => {
  if (!player) {
    return <></>;
  }

  const color = player.color;

  const roads = [];
  for (let i = 0; i < player.roads; i++) {
    roads.push(<Road onClick={onClick} key={`road-${i}`} color={color}/>);
  }
  const settlements = [];
  for (let i = 0; i < player.settlements; i++) {
    settlements.push(<Settlement onClick={onClick} key={`settlement-${i}`} color={color}/>);
  }
  const cities = [];
  for (let i = 0; i < player.cities; i++) {
    cities.push(<City onClick={onClick} key={`city-${i}`} color={color}/>);
  }

  return (
    <div className='BoardPieces' data-active={onClick !== undefined}>
      <div className='Cities'>{cities}</div>
      <div className='Settlements'>{settlements}</div>
      <div className='Roads'>{roads}</div>
    </div>
  );
};

export { BoardPieces };