use jl_types::{domain::{media::Media}, dto::project_card::ProjectCardDto};
use thousands::Separable;
use yew::prelude::*;
use yew_router::prelude::use_navigator;

use crate::routes::main_router::Route;


#[function_component(ProjectCard)]
pub fn project_card(props: &ProjectCardProps) -> Html {
    let navigator = use_navigator().unwrap();
    let project_id = props.project.id.clone();
    let project_view_cb = Callback::from(move |_|{
        navigator.push(&Route::Details { project_id });
    });

    // Card properties
    let cover_image_url;
    if let Some(first_media) = props.project.media.media_list.get(0) {
        cover_image_url = match first_media {
            Media::Photo(url) => url.clone(),
            Media::Video(_) => String::new(),
        }
    } else {
        cover_image_url = String::new()
    }

    let project_title = format!("{} en {}, {}", props.project.project_type, props.project.district, props.project.city);
    
    let project_price = format!("Desde ${} USD", match props.project.starts_from {
        Some(price) => {
            let price_separated = price.separate_with_commas();
            if price_separated.contains(".") {
                price_separated
            } else {
                format!("{price_separated}.00")
            }
        },
        None => "0.00".into()
    });

    let project_condition = props.project.project_condition.to_string();

    let project_est_finish_date = props.project.finish_date.format("%m/%Y");
    //let project_location_written;
    

    html!{
        <div class={"project-listing-card"} onclick={project_view_cb}>
            <img src={cover_image_url} alt={"project image"} class={"project-search-result-card-picture"}/>
            
            <div class={"project-search-result-card-title"}>
                {project_title}
            </div>
            <div class={"project-search-result-card-price"}>
                {project_price}
            </div>
            <div class={"project-search-result-card-details-container"}>
                <div class={"project-search-result-card-details-item"}>
                    <i class="fa-solid fa-hand-holding-hand"></i>
                    <div>{project_condition}</div>
                </div>
                <div class={"project-search-result-card-details-item"}>
                    <i class="fa-regular fa-calendar-check"></i>
                    <div>{format!("Entrega Est: {}", project_est_finish_date)}</div>
                </div>
            </div>
        </div>
    }
}

#[derive(Properties, PartialEq, PartialOrd)]
pub struct ProjectCardProps {
    pub project: ProjectCardDto
}