use leptos::*;
use leptos_meta::*;
use crate::app::DialogHelper;
use crate::components::user_menu::MenuOpener;

#[component]
pub fn Header() -> impl IntoView {
    let drawer = use_context::<MenuOpener>().expect("No drawer opener");
    let dlg_helper = use_context::<DialogHelper>().expect("No dialog helper");

    view! {
        <Html
            lang="cz"
            dir="ltr"
            class = {move || if drawer.visible() {"light-style layout-menu-fixed layout-menu-expanded"}
                        else {"light-style layout-menu-fixed"} }
            attributes=vec![
                ("data-theme", "theme-default".into_attribute()),
                ("data-template", "vertical-menu-template-free".into_attribute()),
                ("data-assets-path", "/".into_attribute())]
        />
        <Title text="Rezervovator"/>
        <Meta charset="utf-8"/>
        <Meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>

        //<!-- Fonts -->
        <Link rel="preconnect" href="https://fonts.googleapis.com" />
        <Link rel="preconnect" href="https://fonts.gstatic.com" />
        <Link
            href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"
            rel="stylesheet"
        />

        //<!-- Icons. Uncomment required icon fonts -->
        <Link rel="stylesheet" href="/vendor/fonts/boxicons.css" />

        //<!-- Core CSS -->
        <Link rel="stylesheet" href="/vendor/css/core.css" />
        <Link rel="stylesheet" href="/vendor/css/theme-default.css" />
        <Link rel="stylesheet" href="/css/demo.css" />
        <Link rel="stylesheet" href="/banner.css" />

        //<!-- Vendors CSS -->
        <Link rel="stylesheet" href="/vendor/libs/perfect-scrollbar/perfect-scrollbar.css" />
        <Body attributes=vec![
            ("style", {move || if dlg_helper.is_open() {"overflow: hidden;"} else {""}}.into_attribute())
        ]/>
    }
}