action-panel-footer-bar

use fandhe_frontend_core::{div, el, Node};
use fandhe_frontend_pre_styled_ui::button::{self, ButtonProps, ButtonVariant};
use fandhe_frontend_pre_styled_ui::button_group::{self, Orientation};
use fandhe_frontend_pre_styled_ui::icon::{icon, IconProps};
use fandhe_frontend_pre_styled_ui::separator::{self, SeparatorProps};
use fandhe_frontend_pre_styled_ui::text::{self as styled_text, TextProps, TextVariant};

/// 自作の単純な幾何アイコン（`page_heading_cover.rs::geo_icon` と同型。
/// モジュール doc「アイコンは自作の単純幾何図形」参照）。開いた線分のみの
/// パスのため `fill="none"` + `stroke="currentColor"` でアウトライン描画
/// にする。
fn geo_icon(path_d: &'static str) -> Node {
    icon(
        &IconProps::default(),
        vec![],
        vec![el(
            "path",
            vec![
                ("d", path_d),
                ("fill", "none"),
                ("stroke", "currentColor"),
                ("stroke-width", "2"),
                ("stroke-linecap", "round"),
                ("stroke-linejoin", "round"),
            ],
            vec![],
        )],
    )
}

/// 縦三点アイコン（「その他の操作」の装飾。実在アイコンセットは使わない）。
fn more_icon() -> Node {
    geo_icon("M12 6v.01 M12 12v.01 M12 18v.01")
}

/// 1 インスタンス分の帯を組み立てる（上罫線 + 補足テキスト + 操作列）。
fn instance(stack: &'static str, note: &'static str, actions: Vec<Node>) -> Node {
    let rule = separator::separator(
        &SeparatorProps::default(),
        vec![("data-blocks-action-panel-footer-bar-rule", "")],
    );
    let note_node = styled_text::text(
        &TextProps {
            variant: TextVariant::Muted,
            ..TextProps::default()
        },
        vec![("data-blocks-action-panel-footer-bar-note", "")],
        vec![fandhe_frontend_core::text(note)],
    );
    let actions_node = div(
        vec![("data-blocks-action-panel-footer-bar-actions", "")],
        actions,
    );
    let bar = div(
        vec![
            ("data-blocks-action-panel-footer-bar-bar", ""),
            ("data-blocks-action-panel-footer-bar-stack", stack),
        ],
        vec![note_node, actions_node],
    );
    div(
        vec![("data-blocks-action-panel-footer-bar-instance", "")],
        vec![rule, bar],
    )
}

/// `action-panel-footer-bar` の Demo 本体（呼び出しごとに同一の `Node` を
/// 返す純関数）。3 インスタンス（R0647/R0648/R0649）を縦に併記する。
pub fn demo() -> Node {
    // A: 代表構成（R0647）。補足が上・操作が下、Outline 2 個の button-group
    // + 単体 Solid「保存」+ アイコンのみ「その他の操作」。
    let example_a = instance(
        "note-first",
        "最終保存: 2 分前（下書き）",
        vec![
            button_group::root(
                Orientation::Horizontal,
                "レコードの操作",
                vec![],
                vec![
                    button::button(
                        &ButtonProps {
                            variant: ButtonVariant::Outline,
                            ..ButtonProps::default()
                        },
                        vec![],
                        vec![fandhe_frontend_core::text("表示")],
                    ),
                    button::button(
                        &ButtonProps {
                            variant: ButtonVariant::Outline,
                            ..ButtonProps::default()
                        },
                        vec![],
                        vec![fandhe_frontend_core::text("編集")],
                    ),
                ],
            ),
            button::button(
                &ButtonProps::default(),
                vec![],
                vec![fandhe_frontend_core::text("保存")],
            ),
            button::icon_button(
                &ButtonProps::default(),
                "その他の操作",
                vec![],
                vec![more_icon()],
            ),
        ],
    );

    // B: 積み順・ボタン順違い（R0648）。狭幅では操作列が先、主ボタン
    // （保存）を先頭に置く。
    let example_b = instance(
        "actions-first",
        "変更は自動で保存されません",
        vec![
            button::button(
                &ButtonProps::default(),
                vec![],
                vec![fandhe_frontend_core::text("保存")],
            ),
            button_group::root(
                Orientation::Horizontal,
                "レコードの操作",
                vec![],
                vec![
                    button::button(
                        &ButtonProps {
                            variant: ButtonVariant::Outline,
                            ..ButtonProps::default()
                        },
                        vec![],
                        vec![fandhe_frontend_core::text("編集")],
                    ),
                    button::button(
                        &ButtonProps {
                            variant: ButtonVariant::Outline,
                            ..ButtonProps::default()
                        },
                        vec![],
                        vec![fandhe_frontend_core::text("表示")],
                    ),
                ],
            ),
        ],
    );

    // C: 主・副ボタンの購入導線（R0649）。狭幅では各ボタンを全幅にして
    // 縦積み。
    let example_c = instance(
        "full-width",
        "合計 ¥4,800（税込）・送料無料",
        vec![
            button::button(
                &ButtonProps::default(),
                vec![],
                vec![fandhe_frontend_core::text("購入する")],
            ),
            button::button(
                &ButtonProps {
                    variant: ButtonVariant::Outline,
                    ..ButtonProps::default()
                },
                vec![],
                vec![fandhe_frontend_core::text("カートに追加")],
            ),
        ],
    );

    div(
        vec![("class", "blocks-action-panel-footer-bar-layout")],
        vec![example_a, example_b, example_c],
    )
}