use super::types::*;
// Types are already imported from super::types::*
use wasm_bindgen::JsCast;
use web_sys::HtmlSelectElement;
use yew::prelude::*;

#[function_component(AdvancedTab)]
pub fn advanced_tab(props: &TabProps) -> Html {
    let data = &props.data;
    
    let on_status_change = {
        let data = data.clone();
        Callback::from(move |e: Event| {
            if let Some(target) = e.target() {
                if let Ok(select) = target.dyn_into::<HtmlSelectElement>() {
                    let mut event_data = (*data).clone();
                    event_data.status = match select.value().as_str() {
                        "tentative" => EventStatus::Tentative,
                        "cancelled" => EventStatus::Cancelled,
                        _ => EventStatus::Confirmed,
                    };
                    data.set(event_data);
                }
            }
        })
    };

    let on_class_change = {
        let data = data.clone();
        Callback::from(move |e: Event| {
            if let Some(target) = e.target() {
                if let Ok(select) = target.dyn_into::<HtmlSelectElement>() {
                    let mut event_data = (*data).clone();
                    event_data.class = match select.value().as_str() {
                        "private" => EventClass::Private,
                        "confidential" => EventClass::Confidential,
                        _ => EventClass::Public,
                    };
                    data.set(event_data);
                }
            }
        })
    };

    let on_priority_change = {
        let data = data.clone();
        Callback::from(move |e: Event| {
            if let Some(target) = e.target() {
                if let Ok(select) = target.dyn_into::<HtmlSelectElement>() {
                    let mut event_data = (*data).clone();
                    let value = select.value();
                    event_data.priority = if value.is_empty() {
                        None
                    } else {
                        value.parse::<u8>().ok().filter(|&p| p <= 9)
                    };
                    data.set(event_data);
                }
            }
        })
    };

    html! {
        <div class="tab-panel">
            <div class="form-row">
                <div class="form-group">
                    <label for="event-status">{"Status"}</label>
                    <select
                        id="event-status"
                        class="form-input"
                        onchange={on_status_change}
                    >
                        <option value="confirmed" selected={matches!(data.status, EventStatus::Confirmed)}>{"Confirmed"}</option>
                        <option value="tentative" selected={matches!(data.status, EventStatus::Tentative)}>{"Tentative"}</option>
                        <option value="cancelled" selected={matches!(data.status, EventStatus::Cancelled)}>{"Cancelled"}</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="event-class">{"Privacy"}</label>
                    <select
                        id="event-class"
                        class="form-input"
                        onchange={on_class_change}
                    >
                        <option value="public" selected={matches!(data.class, EventClass::Public)}>{"Public"}</option>
                        <option value="private" selected={matches!(data.class, EventClass::Private)}>{"Private"}</option>
                        <option value="confidential" selected={matches!(data.class, EventClass::Confidential)}>{"Confidential"}</option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label for="event-priority">{"Priority"}</label>
                <select 
                    id="event-priority" 
                    class="form-input"
                    onchange={on_priority_change}
                >
                    <option value="" selected={data.priority.is_none()}>{"Not set"}</option>
                    <option value="1" selected={data.priority == Some(1)}>{"High"}</option>
                    <option value="5" selected={data.priority == Some(5)}>{"Medium"}</option>
                    <option value="9" selected={data.priority == Some(9)}>{"Low"}</option>
                </select>
                <p class="form-help-text">{"Set the importance level for this event."}</p>
            </div>
        </div>
    }
}