use protocol::card::{Suit, sort_cards, RankOrder};
use yew::prelude::*;

use crate::components::HandProps;

pub const SUIT_ORDER: [Suit; 4] =
    [Suit::Spade, Suit::Heart, Suit::Diamond, Suit::Club];

#[function_component(HandDiagram)]
pub fn hand_diagram(props: &HandProps) -> Html {
    let mut cards = props.cards.clone();
    sort_cards(&SUIT_ORDER, RankOrder::Descending, &mut cards);
    let content: Html = SUIT_ORDER
        .iter()
        .map(|suit| {
            let cards: Html =
                cards
                .iter()
                .filter(|c| c.suit() == *suit)
                .map(|c| html! {<li>{format!("{}", c.rank())}</li>})
                .collect();

            html! {
                <ul>
                  <li>{format!("{suit}")}</li>
                  {cards}
                </ul>
            }
        })
        .collect();
    html! {
        <div class="hand-diagram">
          { content }
        </div>
    }
}