pricing-usage-slider

use fandhe_frontend_core::{div, text, Node};
use fandhe_frontend_pre_styled_ui::fandhe_frontend_headless_ui::slider::Slider;
use fandhe_frontend_pre_styled_ui::fandhe_frontend_headless_ui::Orientation;
use fandhe_frontend_pre_styled_ui::slider::{self, SliderProps};
use fandhe_frontend_pre_styled_ui::stat;
use fandhe_frontend_pre_styled_ui::{ColorPalette, Size};

/// 利用量（月間リクエスト数、架空の目盛り）から価格表示を導く決定的な固定
/// テーブル。範囲は 4 段のプリセット目盛り（10/50/100/500）を跨ぐしきい値
/// で区切っており、外部入力・ユーザー入力を一切受け取らない。
#[must_use]
fn price_for(units: u32) -> &'static str {
    match units {
        0..=10 => "$9",
        11..=50 => "$29",
        51..=100 => "$49",
        _ => "$199",
    }
}

/// `pricing-usage-slider` の Demo 本体。呼び出しごとに同一の `Node` を返す
/// 純関数。スライダーは 4 段のプリセット目盛り（10/50/100/500）の中間
/// （50）に固定した初期値で描画し、対応する価格を [`price_for`] から
/// 求めて `stat` へ表示する。
pub fn demo() -> Node {
    let props = SliderProps::default();
    let selected_units = 50.0_f64;
    let state = Slider::new(0.0, 500.0, 10.0, selected_units, Orientation::Horizontal);

    let slider_node = slider::root(
        Size::Md,
        ColorPalette::Accent,
        &state,
        &props,
        vec![("data-blocks-pricing-usage-slider-slider", "")],
        vec![
            slider::label(
                &props,
                vec![("id", "blocks-pricing-usage-slider-label")],
                vec![text("月間リクエスト数（千件）")],
            ),
            slider::control(
                Orientation::Horizontal,
                &props,
                vec![],
                vec![
                    slider::track(
                        Orientation::Horizontal,
                        &props,
                        vec![],
                        vec![slider::range(&state, &props, vec![])],
                    ),
                    slider::thumb_styled(
                        &state,
                        Some("50 千件"),
                        &props,
                        vec![("aria-labelledby", "blocks-pricing-usage-slider-label")],
                    ),
                    slider::marker_group(
                        vec![],
                        vec![
                            slider::marker(&state, 10.0, false, vec![], vec![]),
                            slider::marker(&state, 50.0, false, vec![], vec![]),
                            slider::marker(&state, 100.0, false, vec![], vec![]),
                            slider::marker(&state, 500.0, false, vec![], vec![]),
                        ],
                    ),
                ],
            ),
            slider::hidden_input("usage-units", "50", false, vec![]),
        ],
    );

    let stat_node = stat::root(
        Size::Lg,
        vec![("data-blocks-pricing-usage-slider-stat", "")],
        vec![
            stat::label(vec![], vec![text("想定コスト")]),
            stat::value_text(
                vec![],
                vec![text(price_for(selected_units as u32)), text(" / 月")],
            ),
            stat::help_text(
                vec![],
                vec![text(
                    "スライダーの選択位置（50 千件/月）に対応する固定表示です",
                )],
            ),
        ],
    );

    div(
        vec![("data-blocks-pricing-usage-slider-layout", "")],
        vec![slider_node, stat_node],
    )
}