Menubar

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

pub fn menubar_demo(choice: Signal<String>) -> Div {
    div()
        .class("demo-wide")
        .child(
            cn::menubar()
                .menu("File", move |menu| {
                    menu.item("New project", move || choice.set("New project".into()))
                        .item("Save", move || choice.set("Saved".into()))
                })
                .menu("Edit", move |menu| {
                    menu.item("Undo", move || choice.set("Undo".into()))
                        .item("Redo", move || choice.set("Redo".into()))
                }),
        )
        .child(
            bound_text(computed(move |g| {
                let choice = g.get(choice).unwrap_or_default();
                if choice == "rust" {
                    "Choose an action".into()
                } else {
                    choice
                }
            }))
            .class("demo-caption"),
        )
}

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

@layer components {
  .cn-menubar,
  .cn-menubar-trigger,
  .cn-menubar-content,
  .cn-menubar-item {
    font-family: var(--font-sans);
  }

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

  .cn-menu-item {
    color: var(--text-primary);
    font-size: var(--text-sm);
    cursor: pointer;
  }

  .cn-menu-item:hover:not(:disabled),
  .cn-menu-item:focus-visible:not(:disabled) {
    background: var(--accent-subtle);
  }

  .cn-menu-item:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

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

  .cn-menubar {
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-1);
    gap: var(--space-1);
  }

  .cn-menubar-trigger {
    padding: var(--space-1-5) var(--space-3);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-primary);
    font-size: var(--text-sm);
    background: transparent;
  }

  .cn-menubar-trigger:hover {
    background: var(--surface-elevated);
  }

  .cn-menubar-content {
    animation: cn-dropdown-menu-enter var(--duration-fast) var(--ease-state);
    transform-origin: top center;
  }

  .cn-menubar-content:has(.cn-menubar-item--has-submenu:hover) {
    animation: none;
  }

  .cn-menubar-item {
    padding: var(--space-2) var(--space-3);
  }
}