use dioxus::prelude::*;
use dioxus_sdk::{i18n::*, translate};

use crate::Route;

pub fn Header() -> Element {
    let i18 = use_i18();

    rsx! {
        nav {
            div {
                // class: "justify-between p-4 space-x-8",
                class: "container mx-auto p-4",

                ul {
                    class:"flex flex-col justify-between sm:flex-row justify-center space-y-2 sm:space-y-0 sm:space-s-4",
                    li {
                        Link {
                            to: Route::Home {},
                            class: "rounded-md shadow-sm",
                            img { src:"/pictures/ClackCat_t.webp", class:"rounded-full h-8", alt:"TuDatTr Logo" },
                        },
                    },
                    li { HeaderLink { url: Route::Home {}, text: translate!(i18, "headers.home")}  },
                    li { HeaderLink { url: Route::CV {}, text: translate!(i18, "headers.cv") } },
                    li { HeaderLink { url: Route::PublicationsProjects {}, text: translate!(i18, "headers.publications_projects") } },
                    li { HeaderLink { url: Route::Consulting {}, text: translate!(i18, "headers.consulting") } },
                    li { HeaderLink { url: Route::Impressum {}, text: translate!(i18, "headers.about") } },
                    li { LanguageButtonGroup {} },
                },
            }
        }
    }
}

#[component]
fn LanguageButtonGroup() -> Element {
    let mut i18 = use_i18();

    let change_to_english = move |_| i18.set_language("en-GB".parse().unwrap());
    let change_to_german = move |_| i18.set_language("de-DE".parse().unwrap());

    rsx! {
      div {
          class: "rounded-md shadow-sm justify-end",
          button { class: "px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-s-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white", onclick: change_to_english, label { { translate!(i18, "headers.language_buttons.english") } } },
          button { class: "px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-e-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white", onclick: change_to_german, label { { translate!(i18, "headers.language_buttons.german") } } }
      }
    }
}

#[component]
fn HeaderLink(url: Route, text: String) -> Element {
    rsx! {
        Link { to: url, class:"md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500", {text} }
    }
}