// A card as 无名杀 draws it: the theme's wood face, the card's art, its name in vertical brush script at the top left,
// suit and rank at the top right; 火杀 and 雷杀 are 杀 with their colour. A card with no art shows its name large.
import type { CSSProperties } from 'react';
import { cardArt } from './art';
import { displayCardName } from '../../../src/client/utils/gameViewHelpers';

export interface Face {
  name: string;
  suit?: string;
  rank?: string;
  damageType?: string;
}

const NATURE: Record<string, string> = { 火焰: 'fire', 雷电: 'thunder' };
export const isRed = (suit?: string) => suit === '♥' || suit === '♦';

/** The card's inside, to fill a sized box (a hand card, a played card, a flying card). */
export function CardInner({ name, suit, rank, damageType }: Face) {
  const art = cardArt(name);
  const label = displayCardName(name, damageType);
  return (
    <>
      {art ? <div className="nm-card-art" style={{ backgroundImage: `url(${art})` }} /> : <div className="nm-card-big">{label.slice(0, 2)}</div>}
      <div className={`nm-card-name${label.length > 3 ? ' long' : ''}`}>{label}</div>
      {suit && (
        <div className={`nm-card-info${isRed(suit) ? ' red' : ''}`}>
          <span className="nm-suit">{suit}</span>
          {rank}
        </div>
      )}
    </>
  );
}

export function cardClass({ suit, damageType }: Face, extra = '') {
  const nature = damageType ? NATURE[damageType] : undefined;
  return `nm-card${isRed(suit) ? ' red' : ''}${nature ? ` ${nature}` : ''}${extra ? ` ${extra}` : ''}`;
}

export function Card({ face, className = '', style, title }: { face: Face; className?: string; style?: CSSProperties; title?: string }) {
  return (
    <div className={cardClass(face, className)} style={style} title={title}>
      <CardInner {...face} />
    </div>
  );
}