Textarea

use leptos::prelude::*;
use tw_merge::*;

const WIDTH_FULL: &str = "w-full";
const FIELD_SIZING_CONTENT: &str = "field-sizing-content";
const FOCUS_VISIBLE_RING: &str =
    "focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1";
const BORDER_INPUT: &str = "border border-input";
const DISABLED_NOT_ALLOWED: &str = "disabled:cursor-not-allowed disabled:opacity-50";
const RING_OFFSET_BG: &str = "ring-offset-background";
const PLACEHOLDER_MUTED_FOREGROUND: &str = "placeholder:text-muted-foreground";

#[allow(unused_variables)]
#[component]
pub fn Textarea(
    #[prop(optional, into)] class: String,
    #[prop(optional_no_strip)] value: Option<ReadSignal<String>>,
    #[prop(optional)] placeholder: Option<&'static str>,
    #[prop(optional)] name: Option<&'static str>,
    #[prop(optional)] id: Option<&'static str>,
    #[prop(optional)] autofocus: bool,
    #[prop(optional)] node_ref: NodeRef<leptos::html::Textarea>,
) -> impl IntoView {
    let class = tw_merge!(
        WIDTH_FULL,
        BORDER_INPUT,
        FOCUS_VISIBLE_RING,
        DISABLED_NOT_ALLOWED,
        RING_OFFSET_BG,
        PLACEHOLDER_MUTED_FOREGROUND,
        FIELD_SIZING_CONTENT,
        "flex min-h-[80px] rounded-md bg-background px-3 py-2 text-sm",
        class
    );

    view! {
        <textarea
            class=class
            name=name
            id=id
            placeholder=placeholder
            node_ref=node_ref
            autofocus=autofocus
            prop:value=move || value.map(|s| s.get()).unwrap_or_default()
        />
    }
}