Context Menu

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

pub fn context_menu_demo(choice: Signal<String>, confirmed: Signal<bool>) -> Div {
    let favorite = confirmed;
    div()
        .class("demo-stack")
        .id("demo-action")
        .on_context_menu(move |event| {
            use blinc_icons::{icons, to_svg};
            let (label, icon) = if favorite.get() {
                ("Remove from favorites", icons::STAR_OFF)
            } else {
                ("Add to favorites", icons::STAR)
            };
            cn::context_menu()
                .at(event.mouse_x, event.mouse_y)
                .item_with_icon("Duplicate", to_svg(icons::COPY, 16.0), move || {
                    choice.set("duplicate".into())
                })
                .item_with_icon("Rename", to_svg(icons::PENCIL, 16.0), move || {
                    choice.set("rename".into())
                })
                .item_with_icon("Share", to_svg(icons::SHARE_2, 16.0), move || {
                    choice.set("share".into())
                })
                .separator()
                .item_with_icon(label, to_svg(icon, 16.0), move || {
                    let next = !favorite.get();
                    favorite.set(next);
                    choice.set(if next { "favorite" } else { "unfavorite" }.into());
                })
                .show();
        })
        .child(
            cn::card()
                .w_full()
                .child(
                    div()
                        .class("demo-profile")
                        .child(
                            svg(blinc_icons::to_svg(blinc_icons::icons::FOLDER, 28.0))
                                .size(28.0, 28.0)
                                .class("demo-icons"),
                        )
                        .child(
                            div()
                                .class("demo-profile-copy")
                                .child(text("Website redesign").class("demo-label"))
                                .child(
                                    bound_text(computed(move |g| {
                                        if g.get(favorite).unwrap_or(false) {
                                            "Team workspace · Favorite"
                                        } else {
                                            "Team workspace"
                                        }
                                        .into()
                                    }))
                                    .class("demo-caption"),
                                ),
                        ),
                )
                .child(
                    bound_text(computed(move |g| {
                        match g.get(choice).as_deref() {
                            Some("duplicate") => "Duplicate selected",
                            Some("rename") => "Rename selected",
                            Some("share") => "Share selected",
                            Some("favorite") => "Added to favorites",
                            Some("unfavorite") => "Removed from favorites",
                            _ => "Right-click for project actions",
                        }
                        .into()
                    }))
                    .class("demo-caption"),
                ),
        )
}

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

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

  .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-context-menu {
    animation: cn-context-menu-enter var(--duration-fast) var(--ease-state);
    transform-origin: top left;
  }

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

  .cn-context-menu:has(.cn-context-menu-item--has-submenu:hover) {
    background: var(--surface-elevated);
    animation: none;
  }

  .cn-context-menu-item {
    padding: var(--space-1-5) var(--space-3);
  }
}