use protocol::card;
use yew::prelude::*;

#[function_component(Card)]
pub fn ccard(props: &CardProps) -> Html {
    let card::Card(suit, rank) = props.card;

    let onclick = {
        let card = props.card;
        let onclick = props.onclick.clone();
        Callback::from(move |_| onclick.emit(card))
    };

    // SVG rendering looks better with the filled versions of the symbols.
    let (color, symbol) = match suit {
        card::Suit::Club => ("#000", "♣"),
        card::Suit::Diamond => ("#d00", "♦"),
        card::Suit::Heart => ("#d00", "♥"),
        card::Suit::Spade => ("#000", "♠"),
    };

    html! {
    <>
      <div class="svg-container card">
        <svg class="svg-element" {onclick} viewBox={"0 0 50 100"}>
        <rect x={"1"} y={"1"} rx={"3"} width={"50"} height={"96"} fill={"white"} stroke={"black"} stroke-width={"2"}/>
        <text x={"22"} y={"35"} fill={color} text-anchor={"middle"} font-weight={"bold"} font-size={"40"}>{format!("{}", rank)}</text>
        <text x={"25"} y={"75"} fill={color} text-anchor={"middle"} font-weight={"bold"} font-size={"40"}>{symbol}</text>
      </svg>
      </div>
    </>
        }
}

#[derive(PartialEq, Properties, Clone)]
pub struct CardProps {
    pub card: card::Card,
    #[prop_or_default]
    pub onclick: Callback<card::Card>,
}