action-panel-with-input

use fandhe_frontend_core::{div, text, Node};
use fandhe_frontend_pre_styled_ui::button::{self, ButtonProps};
use fandhe_frontend_pre_styled_ui::card::{self, CardProps};
use fandhe_frontend_pre_styled_ui::heading::{self, HeadingLevel, HeadingProps, HeadingSize};
use fandhe_frontend_pre_styled_ui::input::{self, FieldIds, FieldProps, InputProps};
use fandhe_frontend_pre_styled_ui::text::{self as styled_text, TextProps, TextVariant};
use fandhe_frontend_pre_styled_ui::visually_hidden;

/// メール入力欄の `id`（`<label for>` と入力欄 `id` を一致させる固定
/// リテラル。モジュール doc「入力欄の `id` を `FieldIds::control` で固定
/// する理由」参照）。
const EMAIL_ID: &str = "blocks-action-panel-with-input-email";

/// メール入力欄のアクセシビリティ状態（初期状態＝未入力・未検証・
/// 有効・必須なし）。
fn email_field() -> FieldProps<'static> {
    FieldProps {
        id: EMAIL_ID,
        ids: FieldIds {
            control: Some(EMAIL_ID),
            ..FieldIds::default()
        },
        disabled: false,
        invalid: false,
        required: false,
        readonly: false,
        has_helper_text: false,
    }
}

/// 見出し（H2、[`Heading`](heading) 部品）。docs ページ自体が H1 を持つため
/// block 内は H2 以下とする（`page_heading_avatar.rs` と同型の判断）。
fn heading_node() -> Node {
    heading::heading(
        HeadingLevel::H2,
        &HeadingProps {
            size: HeadingSize::Md,
            ..HeadingProps::default()
        },
        vec![],
        vec![text("通知メールの送信先")],
    )
}

/// 説明文（[`Text`](styled_text) 部品、`Muted` variant）。
fn description() -> Node {
    styled_text::text(
        &TextProps {
            variant: TextVariant::Muted,
            ..TextProps::default()
        },
        vec![],
        vec![text("週次レポートと重要なお知らせの送信先を設定します。")],
    )
}

/// 視覚的に隠したラベル + メール入力欄 + 保存ボタンの横並び行。
fn input_row() -> Node {
    let label = visually_hidden::root(
        vec![],
        vec![fandhe_frontend_core::el(
            "label",
            vec![("for", EMAIL_ID)],
            vec![text("メールアドレス")],
        )],
    );
    let email_input = input::input(
        &InputProps::default(),
        &email_field(),
        vec![
            ("type", "email"),
            ("autocomplete", "email"),
            ("placeholder", "you@example.com"),
        ],
    );
    let save_button = button::button(
        &ButtonProps::default(),
        vec![("data-blocks-action-panel-with-input-submit", "")],
        vec![text("保存する")],
    );
    div(
        vec![("class", "blocks-action-panel-with-input-row")],
        vec![label, email_input, save_button],
    )
}

/// `action-panel-with-input` の Demo 本体。呼び出しごとに同一の `Node` を
/// 返す純関数。レイアウト用 class は `card::root` へ渡さず最外を素の
/// `div` で包む（`card::root` は `drop_class_attr` で呼び出し側 `class` を
/// 除去するため、[`LAYOUT_CSS`] を効かせるには外側にもう 1 段必要。
/// `page_heading_avatar.rs::demo` と同型の判断）。
#[must_use]
pub fn demo() -> Node {
    let panel = card::root(
        CardProps::default(),
        vec![],
        vec![
            card::header(vec![], vec![heading_node(), description()]),
            card::body(vec![], vec![input_row()]),
        ],
    );
    div(
        vec![("class", "blocks-action-panel-with-input-layout")],
        vec![panel],
    )
}