Textarea

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

pub fn textarea_demo(
    name: Signal<String>,
    multiline: blinc_layout::widgets::text_area::SharedTextAreaState,
    disabled: Signal<bool>,
) -> Div {
    div()
        .class("demo-wide")
        .child(
            cn::textarea(&multiline)
                .label("Your message")
                .placeholder("Tell us what you are building…")
                .rows(4)
                .disabled(disabled)
                .on_change(move |text| name.set(text.to_string())),
        )
        .child(
            bound_text(computed(move |g| {
                format!("{} characters", g.get(name).unwrap_or_default().chars().count())
            }))
            .class("demo-caption"),
        )
}

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

@layer components {
  .blinc-ime-composition {
    text-decoration: underline;
  }

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

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

  .cn-textarea:disabled {
    box-shadow: none;
  }

  .cn-textarea {
    box-shadow: var(--shadow-sm);
    background: var(--cn-textarea-bg, var(--input-bg));
    border-color: var(--border);
    border-radius: var(--radius-default);
    color: var(--text-primary);
    outline: 2px solid transparent;
    outline-offset: 1px;
    transition:
      background-color var(--duration-fast) var(--ease-state),
      border-color var(--duration-fast) var(--ease-state),
      outline-color var(--duration-fast) var(--ease-state),
      outline-offset var(--duration-fast) var(--ease-out);
  }

  .cn-textarea:focus:not(:disabled) {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
  }

  .cn-textarea[data-invalid]:not(:disabled),
  .cn-textarea[data-invalid]:hover:not(:disabled),
  .cn-textarea[data-invalid]:focus:not(:disabled) {
    border-color: var(--border-error);
  }

  .cn-textarea[data-invalid]:focus:not(:disabled) {
    outline: 2px solid var(--focus-ring-error);
  }

  .cn-textarea.cn-textarea--success:not(:disabled),
  .cn-textarea.cn-textarea--success:hover:not(:disabled),
  .cn-textarea.cn-textarea--success:focus:not(:disabled) {
    border-color: var(--success);
  }

  .cn-textarea.cn-textarea--success:focus:not(:disabled) {
    outline: 2px solid var(--focus-ring-success);
  }
}