Navigation Menu

use blinc_cn as cn;
use blinc_core::reactive::{Signal, computed};
use blinc_layout::{binding::IntoReactive, prelude::*};

pub fn navigation_menu_demo(choice: Signal<String>) -> Div {
    div()
        .class("demo-wide")
        .child(
            cn::navigation_menu()
                .item("Overview", move || choice.set("overview".into()))
                .trigger("Resources", move || {
                    div()
                        .class("demo-popover-form")
                        .child(
                            cn::navigation_link("Documentation")
                                .description("Build your first interface")
                                .on_click(move || choice.set("documentation".into())),
                        )
                        .child(
                            cn::navigation_link("Examples")
                                .description("Explore what is possible")
                                .on_click(move || choice.set("examples".into())),
                        )
                }),
        )
        .child(
            bound_text(computed(move |g| {
                format!(
                    "Page: {}",
                    g.get(choice)
                        .filter(|v| v != "rust")
                        .unwrap_or_else(|| "Website".into())
                )
            }))
            .class("demo-caption"),
        )
}

fn bound_text(value: impl IntoReactive<String>) -> Text {
    Text::bound(value.into_reactive())
}

@layer components {
  .cn-nav-menu,
  .cn-nav-link {
    font-family: var(--font-sans);
  }

  .cn-nav-link:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
  }

  .cn-nav-menu {
    gap: var(--space-1);
  }

  .cn-nav-link {
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    color: var(--text-secondary);
  }

  .cn-nav-link:hover {
    background: var(--surface-elevated);
    color: var(--text-primary);
  }

  .cn-nav-link--active {
    background: var(--surface-elevated) !important;
    color: var(--text-primary) !important;
  }

  .cn-nav-menu-content .cn-nav-link:hover {
    background: var(--accent-subtle);
  }

  .cn-nav-menu-content .cn-nav-link {
    color: var(--text-primary);
  }

  .cn-nav-link-description {
    color: var(--text-secondary);
  }

  .cn-nav-menu-content {
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    box-shadow: var(--shadow-md);
    animation: cn-nav-menu-enter var(--duration-fast) var(--ease-state);
    transform-origin: top center;
  }

  @keyframes cn-nav-menu-enter {
    from {
      opacity: 0;
      transform: scale(0.98) translateY(-4px);
    }
    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }
}