use leptos::prelude::*;

#[component]
pub fn CustomInput(
    #[prop(into)] placeholder: String,
    #[prop(optional)] input_type: Option<String>,
    #[prop(optional)] value: Option<ReadSignal<String>>,
    #[prop(optional)] on_change: Option<WriteSignal<String>>,
    #[prop(optional)] show_icon: Option<bool>,
    #[prop(optional)] icon_type: Option<String>,
    #[prop(optional)] on_icon_click: Option<Box<dyn Fn()>>,
    #[prop(optional)] class: Option<String>,
    #[prop(optional)] show_left_button: Option<bool>,
    #[prop(optional)] left_button_icon: Option<String>,
    #[prop(optional)] left_button_text: Option<String>,
    #[prop(optional)] on_left_button_click: Option<Box<dyn Fn()>>,
    #[prop(optional)] left_button_class: Option<String>,
    #[prop(optional)] disabled: Option<ReadSignal<bool>>,
) -> impl IntoView {
    let input_type = input_type.unwrap_or_else(|| "text".to_string());
    let show_icon = show_icon.unwrap_or(false);
    let show_left_button = show_left_button.unwrap_or(false);
    
    let handle_input_change = move |ev: leptos::ev::Event| {
        if let Some(set_value) = on_change {
            set_value.set(event_target_value(&ev));
        }
    };
    
    let handle_icon_click = move |_| {
        if let Some(cb) = on_icon_click.as_ref() {
            cb();
        }
    };
    
    let handle_left_button_click = move |_| {
        if let Some(cb) = on_left_button_click.as_ref() {
            cb();
        }
    };
    
    let container_class = format!("custom-input-container {}", class.unwrap_or_default());
    let input_class = "custom-input";
    let left_btn_class = format!("left-button {}", left_button_class.unwrap_or_default());
    let icon_btn_class = "icon-button";
    
    view! {
        <div class=container_class>
            {show_left_button.then(move || view! {
                <button type="button" class=left_btn_class on:click=handle_left_button_click>
                    {left_button_icon.as_ref().map(|icon| view! {
                        <span class="button-icon">{icon.clone()}</span>
                    })}
                    {left_button_text.as_ref().map(|text| view! {
                        <span class="button-text">{text.clone()}</span>
                    })}
                </button>
            })}
            
            <input
                type=input_type
                placeholder=placeholder
                prop:value=move || value.map_or(String::new(), |v| v.get())
                on:input=handle_input_change
                class=input_class
                disabled=move || disabled.map_or(false, |d| d.get())
            />
            
            {show_icon.then(move || view! {
                <button type="button" class=icon_btn_class on:click=handle_icon_click>
                    {match icon_type.clone().as_deref() {
                        Some("search") => view!{
                            <img src="/icons/search-icon.svg" alt="Search" class="w-[22px] h-[22px]" />
                        }.into_view(),
                        Some("eye") => view!{
                            <img src="/icons/eye-icon.svg" alt="Toggle visibility" class="w-[22px] h-[22px]" />
                        }.into_view(),
                        Some("calendar") => view!{
                            <img src="/icons/calendar-icon.svg" alt="Calendar" class="w-[22px] h-[22px]" />
                        }.into_view(),
                        Some("location") => view!{
                            <img src="/icons/location-icon.svg" alt="Location" class="w-[22px] h-[22px]" />
                        }.into_view(),
                        _ => view!{
                            <img src="/icons/settings-icon.svg" alt="Settings" class="w-[22px] h-[22px]" />
                        }.into_view(),
                    }}
                </button>
            })}
        </div>
    }
}