Dropdown Menu

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

pub fn dropdown_menu_demo(choice: Signal<String>) -> Div {
    div()
        .class("demo-stack")
        .class("demo-stack--center")
        .child(
            cn::dropdown_menu("Project actions")
                .item("Rename", move || choice.set("Rename selected".into()))
                .item_with_shortcut("Save", "⌘ S", move || choice.set("Saved".into()))
                .separator()
                .item_disabled("Archive"),
        )
        .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-dropdown-menu,
  .cn-dropdown-item {
    font-family: var(--font-sans);
  }

  .cn-chevron {
    transition: transform var(--duration-normal) var(--ease-state);
  }

  .cn-dropdown-trigger[data-state="open"] > .cn-chevron {
    transform: rotate(180deg);
  }

  .cn-dropdown-trigger > .cn-chevron {
    color: var(--text-secondary);
  }

  .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;
  }

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

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

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

  .cn-dropdown-item--destructive {
    color: var(--error);
  }

  .cn-dropdown-trigger {
    color: var(--text-primary);
    background: transparent;
    border-color: var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: background-color var(--duration-fast) var(--ease-state);
  }

  .cn-dropdown-trigger:hover {
    background: color-mix(in srgb, var(--text-primary) 5%, transparent);
  }

  .cn-dropdown-trigger:active {
    background: color-mix(in srgb, var(--text-primary) 10%, transparent);
  }
}