use jl_types::domain::{project_state::ProjectState, project_type::ProjectType, project_condition::ProjectCondition};
use log::info;
use yew::prelude::*;
use yew_utils::{components::drop_down::{DropDownProps, DropDown}, vdom::comp_with};

use jl_types::domain::option_wrapper::OptionWrapper;
use crate::components::{nav_bar::NavigationBar, project_card::ProjectCard};


#[function_component(SearchPage)]
pub fn search_page(_props: &SearchPageProperties) -> Html {
    // Dropdown
    let project_type_filter: UseStateHandle<OptionWrapper<ProjectType>> = use_state(|| OptionWrapper::new(None));
    // Dropdown
    let project_condition_filter: UseStateHandle<OptionWrapper<ProjectCondition>> = use_state(|| OptionWrapper::new(None));
    // Dropdown
    let project_state_filter: UseStateHandle<OptionWrapper<ProjectState>> = use_state(|| OptionWrapper::new(None));
    // Dropdown
    let project_city_filter: UseStateHandle<OptionWrapper<String>> = use_state(|| OptionWrapper::new(None));
    // Dropdown
    let project_district_filter: UseStateHandle<OptionWrapper<String>> = use_state(|| OptionWrapper::new(None));
    //TODO: Think about price filtering
    // TextField
    let _project_min_price_filter: UseStateHandle<OptionWrapper<f64>> = use_state(|| OptionWrapper::new(None));
    // TextField
    let _project_max_price_filter: UseStateHandle<OptionWrapper<f64>> = use_state(|| OptionWrapper::new(None));
    
    
    let project_type_drop_down = comp_with::<DropDown<OptionWrapper<ProjectType>>>(DropDownProps {
        initial: OptionWrapper::new(None),
        options: vec![OptionWrapper::new(None), OptionWrapper::new(Some(ProjectType::Apartamento)), OptionWrapper::new(Some(ProjectType::Casa)), OptionWrapper::new(Some(ProjectType::Oficina)), OptionWrapper::new(Some(ProjectType::Local)), OptionWrapper::new(Some(ProjectType::Solar)) ],
        selection_changed: {
            let cloned_project_type_filter = project_type_filter.clone();
            Callback::from(move |project_type: OptionWrapper<ProjectType>| {
                info!("{}", project_type.to_string());
                cloned_project_type_filter.set(project_type)
            }
        )},
        class_css: Some("project-search-filter-item".into())
    });

    let project_state_drop_down = comp_with::<DropDown<OptionWrapper<ProjectState>>>(DropDownProps {
        initial: OptionWrapper::new(None),
        options: vec![OptionWrapper::new(None), OptionWrapper::new(Some(ProjectState::InConstruction)), OptionWrapper::new(Some(ProjectState::Finished)) ],
        selection_changed: {
            let cloned_project_state_filter = project_state_filter.clone();
            Callback::from(move |project_state: OptionWrapper<ProjectState>| {
                info!("{}", project_state.to_string());
                cloned_project_state_filter.set(project_state)
            }
        )},
        class_css: Some("project-search-filter-item".into())
    });
    
    let project_condition_drop_down = comp_with::<DropDown<OptionWrapper<ProjectCondition>>>(DropDownProps {
        initial: OptionWrapper::new(None),
        options: vec![OptionWrapper::new(None), OptionWrapper::new(Some(ProjectCondition::New)), OptionWrapper::new(Some(ProjectCondition::Resale)) ],
        selection_changed: {
            let cloned_project_condition_filter = project_condition_filter.clone();
            Callback::from(move |project_condition: OptionWrapper<ProjectCondition>| {
                info!("{}", project_condition.to_string());
                cloned_project_condition_filter.set(project_condition)
            }
        )},
        class_css: Some("project-search-filter-item".into())
    });

    let project_city_drop_down = comp_with::<DropDown<OptionWrapper<String>>>(DropDownProps {
        initial: OptionWrapper::new(None),
        options: vec![OptionWrapper::new(None), OptionWrapper::new(Some("Santo Domingo".into())), OptionWrapper::new(Some("Punta Cana".into())) ],
        selection_changed: {
            let cloned_project_city_filter = project_city_filter.clone();
            Callback::from(move |project_city: OptionWrapper<String>| {
                info!("{}", project_city.to_string());
                cloned_project_city_filter.set(project_city)
            }
        )},
        class_css: Some("project-search-filter-item".into())
    });

    //TODO: District dropdown should only show districts in city, otherwise show nothing or disabled
    let project_district_drop_down = comp_with::<DropDown<OptionWrapper<String>>>(DropDownProps {
        initial: OptionWrapper::new(None),
        options: vec![OptionWrapper::new(None), OptionWrapper::new(Some("Evaristo Morales".into())), OptionWrapper::new(Some("Cap Cana".into())) ],
        selection_changed: {
            let cloned_project_district_filter = project_district_filter.clone();
            Callback::from(move |project_district: OptionWrapper<String>| {
                info!("{}", project_district.to_string());
                cloned_project_district_filter.set(project_district)
            }
        )},
        class_css: Some("project-search-filter-item".into())
    });

    html!{
        <>
            <NavigationBar/>
            <div class={"page-container"}>
                <div class={"project-search-container"}>
                    <div class={"project-search-filters-container"}> // Filters
                        <div class={"project-search-filter-container"}>
                            <div class={"project-search-filter-label"}>
                                {"Tipo de Proyecto"}
                            </div>
                            {project_type_drop_down}
                        </div>

                        <div class={"project-search-filter-container"}>
                            <div class={"project-search-filter-label"}>
                                {"Estatus de Proyecto"}
                            </div>
                            {project_state_drop_down}
                        </div>

                        <div class={"project-search-filter-container"}>
                            <div class={"project-search-filter-label"}>
                                {"Condición de Proyecto"}
                            </div>
                            {project_condition_drop_down}
                        </div>
                        
                        <div class={"project-search-filter-container"}>
                            <div class={"project-search-filter-label"}>
                                {"Ciudad"}
                            </div>
                            {project_city_drop_down}
                        </div>

                        <div class={"project-search-filter-container"}>
                            <div class={"project-search-filter-label"}>
                                {"Sector"}
                            </div>
                            {project_district_drop_down}
                        </div>
                    </div>
                    <div class={"project-search-divider"}/>
                </div>

                <div class={"project-search-results-container"}> // Search Results Content
                    <ProjectCard/>
                    <ProjectCard/>
                    <ProjectCard/>
                    <ProjectCard/>
                </div>
            </div>
        </>
    }
}

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