import React from "react";

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

/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-non-null-assertion */

interface RoadProps {
  color: string;
  onClick: (type: string) => void;
}

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

interface SettlementProps {
  color: string;
  onClick: (type: string) => void;
}

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

interface CityProps {
  color: string;
  onClick: (type: string) => void;
}

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

interface BoardPiecesProps {
  player: any;
  onClick?: (type: string) => void;
}

const BoardPieces: React.FC<BoardPiecesProps> = ({ player, onClick }) => {
  if (!player) {
    return <></>;
  }

  const color = player.color;

  const roads: React.ReactElement[] = [];
  for (let i = 0; i < player.roads; i++) {
    roads.push(<Road onClick={onClick!} key={`road-${i}`} color={color} />);
  }
  const settlements: React.ReactElement[] = [];
  for (let i = 0; i < player.settlements; i++) {
    settlements.push(<Settlement onClick={onClick!} key={`settlement-${i}`} color={color} />);
  }
  const cities: React.ReactElement[] = [];
  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 };
