Tree

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

pub fn tree_demo(choice: Signal<String>) -> Div {
    div()
        .class("demo-stack")
        .child(
            cn::tree_view()
                .with_guides()
                .node("src", "src", |node| {
                    node.expanded()
                        .child("main", "main.rs", |node| node)
                        .child("ui", "ui.rs", |node| node)
                })
                .node("assets", "assets", |node| node.child("theme", "theme.css", |node| node))
                .on_select(move |key| choice.set(key.to_string())),
        )
        .child(
            bound_text(computed(move |g| {
                g.get(choice)
                    .filter(|v| v != "rust")
                    .map(|v| format!("Selected: {v}"))
                    .unwrap_or_else(|| "Select a file".into())
            }))
            .class("demo-caption"),
        )
}

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

@layer components {
  .cn-tree {
    font-family: var(--font-sans);
  }

  .cn-tree {
    font-size: var(--text-sm);
  }

  .cn-tree-row {
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    background: transparent;
    cursor: pointer;
    outline: 0 solid var(--focus-ring);
    outline-offset: -2px;
    transition: background var(--duration-fast) var(--ease-state),
      color var(--duration-fast) var(--ease-state);
  }

  .cn-tree-row:hover {
    background: var(--accent-subtle);
    color: var(--text-primary);
  }

  .cn-tree-row[data-selected],
  .cn-tree-row[data-selected]:hover {
    background: color-mix(in srgb, var(--primary) 24%, transparent) !important;
    color: var(--text-primary) !important;
  }

  .cn-tree-row[data-focus-visible] {
    outline-width: 2px;
  }

  .cn-tree-row[data-diff="added"] {
    color: var(--success);
  }

  .cn-tree-row[data-diff="removed"] {
    color: var(--error);
  }

  .cn-tree-row[data-diff="modified"] {
    color: var(--warning);
  }

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

  .cn-tree-item[data-state="open"] > .cn-tree-row > .cn-tree-chevron {
    transform: rotate(90deg);
  }

  .cn-tree-icon {
    color: var(--text-tertiary);
  }

  .cn-tree-row[data-selected] > .cn-tree-icon {
    color: var(--primary) !important;
  }

  .cn-tree-group {
    overflow: hidden;
  }

  .cn-tree-group[data-state="closed"] {
    height: 0;
  }

  .cn-tree-guide {
    background: transparent;
  }

  .cn-tree[data-guides] .cn-tree-guide {
    background: var(--border);
  }
}