Button

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

pub fn button_demo(clicks: Signal<u32>, disabled: Signal<bool>) -> Div {
    div()
        .class("demo-wide")
        .class("demo-stack--center")
        .child(
            button("Click me")
                .disabled(disabled)
                .on_click(move |_| clicks.set(clicks.get() + 1))
                .build_component()
                .id("demo-action"),
        )
        .child(
            bound_text(computed(move |graph| {
                format!("Clicked {} times", graph.get(clicks).unwrap_or(0))
            }))
            .class("demo-caption"),
        )
        .child(
            div()
                .class("demo-row")
                .child(
                    cn::button("Secondary")
                        .variant(cn::ButtonVariant::Secondary)
                        .disabled(disabled),
                )
                .child(
                    cn::button("Outline")
                        .variant(cn::ButtonVariant::Outline)
                        .disabled(disabled),
                )
                .child(cn::button("Ghost").variant(cn::ButtonVariant::Ghost).disabled(disabled)),
        )
        .child(
            div()
                .class("demo-row")
                .child(
                    cn::button("Remove")
                        .variant(cn::ButtonVariant::Destructive)
                        .disabled(disabled),
                )
                .child(
                    cn::button("Documentation")
                        .variant(cn::ButtonVariant::Link)
                        .disabled(disabled),
                ),
        )
}

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

@layer components {
  .blinc-button {
    background: var(--primary);
    color: var(--text-inverse);
    transition:
      background-color var(--duration-fast) var(--ease-state),
      color var(--duration-fast) var(--ease-state),
      border-color var(--duration-fast) var(--ease-state);
  }

  .blinc-button:hover:not(:disabled) {
    background: var(--primary-hover);
  }

  .blinc-button:active:not(:disabled) {
    background: var(--primary-active);
  }

  .blinc-button:disabled {
    background: var(--input-bg-disabled);
    color: var(--text-tertiary);
  }

  .cn-button {
    font-family: var(--font-sans);
  }

  .cn-button {
    letter-spacing: var(--tracking-tight);
  }

  .cn-button {
    border-radius: var(--radius-default);
    cursor: pointer;
    transition:
      background-color var(--duration-fast) var(--ease-state),
      color var(--duration-fast) var(--ease-state),
      border-color var(--duration-fast) var(--ease-state),
      box-shadow var(--duration-fast) var(--ease-state),
      transform var(--duration-faster) var(--ease-state);
  }

  .cn-button:disabled {
    cursor: not-allowed;
  }

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

  .cn-button:active:not(:disabled) {
    transform: scale(0.97, 0.97);
  }

  .cn-button--link:active:not(:disabled) {
    transform: none;
    opacity: 0.8;
  }

  .cn-button--primary {
    background: var(--primary);
    color: var(--text-inverse);
    box-shadow: var(--shadow-md);
  }

  .cn-button--primary:hover:not(:disabled) {
    background: var(--primary-hover);
  }

  .cn-button--primary:active:not(:disabled) {
    background: var(--primary-active);
  }

  .cn-button--secondary {
    background: var(--secondary);
    color: var(--text-inverse);
    box-shadow: var(--shadow-md);
  }

  .cn-button--secondary:hover:not(:disabled) {
    background: var(--secondary-hover);
  }

  .cn-button--secondary:active:not(:disabled) {
    background: var(--secondary-active);
  }

  .cn-button--destructive {
    background: var(--error);
    color: var(--text-inverse);
    box-shadow: var(--shadow-md);
  }

  .cn-button--destructive:hover:not(:disabled) {
    background: color-mix(in srgb, var(--error) 90%, black);
  }

  .cn-button--destructive:active:not(:disabled) {
    background: color-mix(in srgb, var(--error) 85%, black);
  }

  .cn-button--outline {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
  }

  .cn-button--ghost {
    background: transparent;
    color: var(--text-primary);
  }

  .cn-button--outline:hover:not(:disabled),
  .cn-button--ghost:hover:not(:disabled) {
    background: color-mix(in srgb, var(--text-primary) 5%, transparent);
  }

  .cn-button--outline:active:not(:disabled),
  .cn-button--ghost:active:not(:disabled) {
    background: color-mix(in srgb, var(--text-primary) 10%, transparent);
  }

  .cn-button--link {
    background: transparent;
    color: var(--primary);
  }

  .cn-button:disabled {
    background: var(--input-bg-disabled);
    color: var(--text-tertiary);
    border: 1px solid var(--border-secondary);
    box-shadow: none;
    transform: none;
  }

  .cn-button--sm {
    border-radius: var(--radius-sm);
  }

  .cn-button--md {
    border-radius: var(--radius-default);
  }

  .cn-button--lg {
    border-radius: var(--radius-lg);
  }

  .cn-button--icon {
    border-radius: var(--radius-default);
  }
}