import * as React from "react";
import { CardProps } from "./types";

export const fullcardStyles = {
  content: {
    backgroundColor: "#0c0c0c",
    color: "#f8f8f8"
  }
};

export const FullCard = ({ card }: { card: CardProps | null }) => {
  if (card === null) {
    return <></>;
  }

  return (
    <div className="fullcard">
      <div className="content">
        <div>
          <img src={card.imageUrl} alt={card.name} />
          <h4>{card.name}</h4>
          <p className="card-text">{card.text}</p>
        </div>
        <div>
          <table>
            <tbody>
              <tr>
                <td>
                  <strong>Type</strong>
                </td>
                <td>{card.type}</td>
              </tr>
              <tr>
                <td>
                  <strong>Subtypes</strong>
                </td>
                <td>{card.subtypes ? card.subtypes.join(", ") : ""}</td>
              </tr>
              <tr>
                <td>
                  <strong>Set Name:</strong>
                </td>
                <td>{card.set.name}</td>
              </tr>
              <tr>
                <td>
                  <strong>Rarity</strong>
                </td>
                <td>{card.rarity}</td>
              </tr>
              <tr>
                <td>
                  <strong>Set</strong>
                </td>
                <td>{card.set.name}</td>
              </tr>
              <tr>
                <td>
                  <strong>Attributes</strong>
                </td>
                <td>{card.attributes.join(", ")}</td>
              </tr>
              <tr>
                <td>
                  <strong>Keywords</strong>
                </td>
                <td>{card.keywords}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div>
          <table>
            <tbody>
              <tr>
                <td>
                  <strong>Cost</strong>
                </td>
                <td>{card.cost}</td>
              </tr>
              <tr>
                <td>
                  <strong>Power</strong>
                </td>
                <td>{card.power}</td>
              </tr>
              <tr>
                <td>
                  <strong>Health</strong>
                </td>
                <td>{card.health}</td>
              </tr>
              <tr>
                <td>
                  <strong>Soul Summon</strong>
                </td>
                <td>{card.soulSummon}</td>
              </tr>
              <tr>
                <td>
                  <strong>Soul Trap</strong>
                </td>
                <td>{card.soulTrap}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      {card.collectible ? <p>This card is considered collectible.</p> : ""}
      {card.unique ? (
        <p>This card is unique. Unique cards may only be used once per deck.</p>
      ) : (
        ""
      )}
    </div>
  );
};