use std::{fmt::Display, str::FromStr};

use yew::prelude::*;

use crate::components::nav_bar::NavigationBar;

#[function_component(SearchPage)]
pub fn search_page(_props: &SearchPageProperties) -> Html {
    let search_text = use_state(|| String::new());
    let clear_search_input = {
        let search_text = search_text.clone();
        Callback::from(move |_| {
            search_text.set(String::new())
        })
    };
    html!{
        <>
            <NavigationBar/>
            <div class={"page-container"}>
                <div class={"property-search-container"}>
                    <div class={"property-search-bar-container"}> // Search bar
                        <i class={"fa-solid fa-magnifying-glass"}></i>
                        <input type={"text"} value={(*search_text).clone()} class={"property-search-bar"} placeholder={"Buscar propiedades..."}/>
                        <div class={"search-bar-erase-button"}>
                            <i class="fa-solid fa-circle-xmark" onclick={clear_search_input}></i>
                        </div>
                        <div class={"search-bar-filter-button"}>
                            <i class="fa-solid fa-sliders"></i>
                        </div>
                    </div>
                    
                    <div class={"property-search-filters-container"}> // Filters
                        <div class={"property-search-filter-item"}>
                            <div>{"0"}</div> 
                            <i class="fa-solid fa-bed"></i> 
                            <div>{"+"}</div>
                        </div>
                        <div class={"property-search-filter-item"}>
                            <div>{"0"}</div>
                            <i class="fa-solid fa-ruler"></i>
                            <div>{"+"}</div>
                        </div>
                        <div class={"property-search-filter-item"}>
                            <div>{"0"}</div>
                            <i class="fa-solid fa-dollar-sign"></i>
                            <div>{"+"}</div>
                        </div>
                        <div class={"property-search-filter-item"}>
                            <div>{"0"}</div>
                            <i class="fa-solid fa-hand-holding-dollar"></i>
                            <div>{"+"}</div>
                        </div>
                    </div>
                </div>

                //TODO: Add a spacing
                

                <div class={"property-search-results-container"}> // Search Results Content
                    <div class={"property-search-result-card"}></div>
                </div>
            </div>
        </>
    }
}

#[derive(Debug, Clone, PartialEq, Eq, PartialOrd, Ord, Properties)]
pub struct SearchPageProperties {
    pub property_state: PropertyState
}


#[derive(Debug, Clone, Default, PartialEq, Eq, PartialOrd, Ord)]
pub enum PropertyState {
    Finished,
    #[default]
    InConstruction,
}

impl Display for PropertyState {
    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
        match self {
            PropertyState::Finished => write!(f, "Finished"),
            PropertyState::InConstruction => write!(f, "InConstruction"),
        }
    }
}

impl FromStr for PropertyState {
    type Err = ();

    fn from_str(s: &str) -> Result<Self, Self::Err> {
        match s {
            "Finished" => Ok(Self::Finished),
            "InConstruction" => Ok(Self::InConstruction),
            _ => Err(())
        }
    }
}