import React from "react";
import "./Resource.css";
import { assetsPath } from "./Common";

type ResourceProps = {
  type: string;
  disabled?: boolean;
  available?: number;
  count?: number;
  label?: boolean;
  onClick?: (e: React.MouseEvent) => void;
};

const Resource: React.FC<ResourceProps> = ({ type, disabled, available, count, label, onClick }) => {
  const array = new Array(Number(count ? count : 0));
  const click = (event: React.MouseEvent) => {
    if (!disabled) {
      (event.target as HTMLElement).classList.toggle("Selected");
    }
    if (onClick) onClick(event);
  };

  if (label) {
    return (
      <div
        className={`Resource ${count === 0 ? "None" : ""}`}
        data-type={type}
        onClick={click}
        style={{ backgroundImage: `url(${assetsPath}/gfx/card-${type}.png)` }}
      >
        {available !== undefined && <div className="Left">{available}</div>}
        <div className="Right">{count}</div>
      </div>
    );
  }

  return (
    <>
      {array.length > 0 && (
        <div className="Stack">
          {React.Children.map(array, () => (
            <div
              className="Resource"
              data-type={type}
              onClick={click}
              style={{ backgroundImage: `url(${assetsPath}/gfx/card-${type}.png)` }}
            />
          ))}
        </div>
      )}
    </>
  );
};

export { Resource };