use crate::locales::{init_locales, trl};
use crate::pages::home_page::HomePage;
use crate::pages::settings::Settings;
use leptos::*;
use leptos_meta::*;
use leptos_router::*;

#[component]
pub fn App() -> impl IntoView {
    // Provides context that manages stylesheets, titles, meta tags, etc.
    provide_meta_context();
    init_locales();

    view! {
        <Html
            lang="cz"
            dir="ltr"
            attributes=AdditionalAttributes::from(vec![
                ("data-theme", "theme-default"),
                ("class", "light-style layout-menu-fixed"),
                ("data-template", "vertical-menu-template-free"),
                ("data-assets-path", "/")])
        />
        <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" />

        //<!-- Vendors CSS -->
        <Link rel="stylesheet" href="/vendor/libs/perfect-scrollbar/perfect-scrollbar.css" />
        <Body class="testik"/>
        <div class="layout-wrapper layout-content-navbar">
            <div class="layout-container">
        //<!-- Menu -->

                <aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme">
                    <div class="app-brand demo">
                        <a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto d-block d-xl-none">
                            <i class="bx bx-chevron-left bx-sm align-middle"></i>
                        </a>
                    </div>
                    <div class="menu-inner-shadow"></div>

                    <ul class="menu-inner py-1">
                        //<!-- Dashboard -->
                        <li class="menu-item">
                            <a href="/" class="menu-link">
                                <i class="menu-icon tf-icons bx bx-home-circle"></i>
                                <div data-i18n="Analytics">{trl("Dashboard")}</div>
                            </a>
                        </li>
                        <li class="menu-item">
                            <a href="/" class="menu-link">
                                <i class="menu-icon tf-icons bx bx-time"></i>
                                <div data-i18n="Analytics">"Opening hours"</div>
                            </a>
                        </li>
                        <li class="menu-item">
                            <a href="/" class="menu-link">
                                <i class="menu-icon tf-icons bx bx-layer"></i>
                                <div data-i18n="Analytics">"Places"</div>
                            </a>
                        </li>
                        <li class="menu-item">
                            <a href="/" class="menu-link">
                                <i class="menu-icon tf-icons bx bx-info-circle"></i>
                                <div data-i18n="Analytics">"About"</div>
                            </a>
                        </li>
                    </ul>
                </aside>
                //<!-- Layout container -->
                <div class="layout-page">
                    //<!-- Navbar -->

                      <nav
                        class="layout-navbar container-xxl navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
                        id="layout-navbar">
                        <div class="layout-menu-toggle navbar-nav align-items-xl-center me-3 me-xl-0 d-xl-none">
                          <a class="nav-item nav-link px-0 me-xl-4" href="javascript:void(0)">
                            <i class="bx bx-menu bx-sm"></i>
                          </a>
                        </div>

                        <div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse">
                          //<!-- Search -->
                          <div class="navbar-nav align-items-center ms-auto mt-auto">
                            <div class="nav-item d-flex align-items-center mt-auto">
                              <h4 class="mt-3"><i class="bx bx-desktop fs-4 lh-0"></i>" Admin portal"</h4>
                            </div>
                          </div>
                          //<!-- /Search -->
                          <ul class="navbar-nav flex-row align-items-center ms-auto">
                            <li class="nav-item navbar-dropdown dropdown-user dropdown">
                              <a class="nav-link dropdown-toggle hide-arrow" href="/settings" data-bs-toggle="dropdown">
                              <i class="bx bx-cog fs-3 lh-0"></i>
                                </a>
                            </li>
                            //<!-- User -->
                            <li class="nav-item navbar-dropdown dropdown-user dropdown">
                              <a class="nav-link dropdown-toggle hide-arrow" href="#" data-bs-toggle="dropdown">
                                //<div class="avatar avatar-online">
                                //  <img src="/img/avatars/1.png" alt class="w-px-40 h-auto rounded-circle" />
                                //</div>
                                <i class="bx bx-user fs-3 lh-0"></i>
                              </a>
                              <ul class="dropdown-menu dropdown-menu-end">
                                <li>
                                  <a class="dropdown-item" href="#">
                                    <div class="d-flex">
                                      <div class="flex-shrink-0 me-3">
                                        <div class="avatar avatar-online">
                                          <img src="/img/avatars/1.png" alt class="w-px-40 h-auto rounded-circle" />
                                        </div>
                                      </div>
                                      <div class="flex-grow-1">
                                        <span class="fw-semibold d-block">"John Doe"</span>
                                        <small class="text-muted">"Admin"</small>
                                      </div>
                                    </div>
                                  </a>
                                </li>
                                <li>
                                  <div class="dropdown-divider"></div>
                                </li>
                                <li>
                                  <a class="dropdown-item" href="#">
                                    <i class="bx bx-user me-2"></i>
                                    <span class="align-middle">"My Profile"</span>
                                  </a>
                                </li>
                                <li>
                                  <a class="dropdown-item" href="#">
                                    <i class="bx bx-cog me-2"></i>
                                    <span class="align-middle">"Settings"</span>
                                  </a>
                                </li>
                                <li>
                                  <div class="dropdown-divider"></div>
                                </li>
                                <li>
                                  <a class="dropdown-item" href="auth-login-basic.html">
                                    <i class="bx bx-power-off me-2"></i>
                                    <span class="align-middle">"Log Out"</span>
                                  </a>
                                </li>
                              </ul>
                            </li>
                            //<!--/ User -->
                          </ul>
                        </div>
                      </nav>

                //<!-- Content wrapper -->
                <div class="content-wrapper">
                    //<!-- Content -->
                    <div class="container-xxl flex-grow-1 container-p-y">
                    <Router>
                        <main>
                            <Routes>
                                <Route path="" view=|| view! { <HomePage/> }/>
                                <Route path="settings" view=|| view! { <Settings/> }/>
                            </Routes>
                        </main>
                    </Router>
                    </div>
                </div>
                </div>
            </div>
        </div>

        /*<Html lang="cz"/>
        // injects a stylesheet into the document <head>
        // id=leptos means cargo-leptos will hot-reload this stylesheet
        <Stylesheet id="leptos" href="/pkg/leptos_start.css"/>
        <Stylesheet href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>


        // sets the document title
        <Title text="Welcome to Leptos"/>

        <div class="topbar">
            <img src="/logo.png" width=40 height=40/><h1>"Rezervator admin"</h1>
        </div>

        <div class="main">
        <div class="sidebar">
            <p></p>
            <a class="active" href="#home">"Dashboard"</a>
            <a href="#news">"Opening hours"</a>
            <a href="#contact">"Places"</a>
            <a href="#about">"About"</a>
        </div>

        // content for this welcome page
        <div class="content">
        <Router>
            <main>
                <Routes>
                    <Route path="" view=|| view! { <HomePage/> }/>
                </Routes>
            </main>
        </Router>
        </div>
        </div>*/
    }
}
