use leptos::*;
use leptos_meta::*;
use reqwest::Client;
use serde::Serialize;

#[derive(Serialize)]
struct Params {
    command: String,
    shadeId: i32,
}

#[component]
pub fn Shutters() -> impl IntoView {
    view! {
        <Title text="Volets"/>

        <div class="flex flex-wrap justify-center gap-2">
            <Shutter name="Cuisine".to_string() shade_id=6 />
            <Shutter name="Porte fenêtre".to_string() shade_id=2 />
            <Shutter name="Salon fenêtre".to_string() shade_id=4 />
            <Shutter name="Salon vidéo".to_string() shade_id=5 />
            <Shutter name="Bureau".to_string() shade_id=1 />
        </div>
    }
}

#[component]
pub fn Shutter(name: String, shade_id: i32) -> impl IntoView {
    let (response, set_response) = create_signal(None::<String>);

    let move_up = create_action(move |_| async move {
        let client = Client::new();
        let params = Params {
            command: "up".to_string(),
            shadeId: shade_id,
        };
        let url = "http://192.168.3.34/shadeCommand";

        match client.put(url).json(&params).send().await {
            Ok(resp) => {
                let text = resp.text().await.unwrap_or("Réponse vide".to_string());
                set_response.set(Some(text));
            }
            Err(e) => {
                set_response.set(Some(format!("Erreur: {:?}", e)));
            }
        }
    });

    let move_my = create_action(move |_| async move {
        let client = Client::new();
        let params = Params {
            command: "my".to_string(),
            shadeId: shade_id,
        };
        let url = "http://192.168.3.34/shadeCommand";

        match client.put(url).json(&params).send().await {
            Ok(resp) => {
                let text = resp.text().await.unwrap_or("Réponse vide".to_string());
                set_response.set(Some(text));
            }
            Err(e) => {
                set_response.set(Some(format!("Erreur: {:?}", e)));
            }
        }
    });

    let move_down = create_action(move |_| async move {
        let client = Client::new();
        let params = Params {
            command: "down".to_string(),
            shadeId: shade_id,
        };
        let url = "http://192.168.3.34/shadeCommand";

        match client.put(url).json(&params).send().await {
            Ok(resp) => {
                let text = resp.text().await.unwrap_or("Réponse vide".to_string());
                set_response.set(Some(text));
            }
            Err(e) => {
                set_response.set(Some(format!("Erreur: {:?}", e)));
            }
        }
    });

    view! {
        <div class="bg-prim-light rounded-lg w-48 px-3">
            <div class="text-2xl text-center">{name}</div>
            <div class="flex justify-between bg-second-dark rounded *:flex-1 *:transition">
                <button on:click=move |_| move_up.dispatch(()) class="hover:text-third focus:text-third-light">
                    <Arrow class="-rotate-90 w-8 inline".to_string() />
                </button>
                <button on:click=move |_| move_my.dispatch(()) class="hover:text-third focus:text-third-light">"My"</button>
                <button on:click=move |_| move_down.dispatch(())  class="hover:text-third focus:text-third-light">
                    <Arrow class="rotate-90 w-8 inline".to_string() />
                </button>
            </div>
        </div>
    }
}

#[component]
pub fn Arrow(class: String) -> impl IntoView {
    view! {
        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"  class=format!("{}", class)>
            <path fill="currentColor" d="M6.23 20.23L8 22l10-10L8 2L6.23 3.77L14.46 12z"/>
        </svg>
    }
}