reviews-write-form

use fandhe_frontend_core::{div, text, Node};
use fandhe_frontend_pre_styled_ui::button::{self, ButtonProps};
use fandhe_frontend_pre_styled_ui::field::{self, FieldOrientation, FieldRootProps};
use fandhe_frontend_pre_styled_ui::heading::{self, HeadingLevel, HeadingProps};
use fandhe_frontend_pre_styled_ui::input::{self, FieldIds, FieldProps, InputProps};
use fandhe_frontend_pre_styled_ui::rating_group::{
    self, RatingGroup, RatingGroupProps, RatingItemFlags,
};
use fandhe_frontend_pre_styled_ui::textarea::{self, TextareaProps};
use fandhe_frontend_pre_styled_ui::{ColorPalette, Size};

/// 一意な id を組み立てる（`blocks-reviews-write-form-` 接頭辞を共通化し、
/// フィールド追加時の綴り間違いを防ぐ）。
fn field_id(suffix: &str) -> String {
    format!("blocks-reviews-write-form-{suffix}")
}

/// 縦積み（label 上・control 下）の共通 orientation。
fn orientation() -> FieldRootProps {
    FieldRootProps {
        orientation: FieldOrientation::Vertical,
    }
}

/// 通常フィールド（`text`/`email` 等）を組み立てる。全項目を必須にする
/// （R0213 の「名前・メール・評価・題名・本文 + 投稿」が全項目必須の構成
/// であることに対応）。
fn text_field(
    id: String,
    label_text: &'static str,
    input_type: &'static str,
    autocomplete: &'static str,
    placeholder: &'static str,
) -> Node {
    let props = FieldProps {
        id: id.as_str(),
        ids: FieldIds::default(),
        disabled: false,
        invalid: false,
        required: true,
        readonly: false,
        has_helper_text: false,
    };
    field::root(
        &orientation(),
        &props,
        vec![("data-blocks-reviews-write-form-field", "")],
        vec![
            field::label(&props, vec![], vec![text(label_text)]),
            input::input(
                &InputProps::default(),
                &props,
                vec![
                    ("type", input_type),
                    ("autocomplete", autocomplete),
                    ("placeholder", placeholder),
                ],
            ),
        ],
    )
}

/// 評価フィールド（readonly `rating-group`、既定値 4 固定の静的表示。
/// モジュール doc「評価は `rating-group`」節参照）。`field::root` ではなく
/// 専用の `div` ラッパーで他フィールドと縦並びの見た目を揃える
/// （モジュール doc「評価に `field::root` を使わない理由」節参照）。
fn rating_field() -> Node {
    let label_id = field_id("rating-label");
    let props = RatingGroupProps {
        disabled: false,
        readonly: true,
        required: true,
    };
    let state = RatingGroup::new(5, Some(4), true);
    let label = rating_group::label(&props, Some(label_id.as_str()), vec![], vec![text("評価")]);
    let items: Vec<Node> = (1..=state.count())
        .map(|i| {
            rating_group::item(
                i,
                RatingItemFlags {
                    checked: state.is_checked(i),
                    highlighted: state.is_highlighted(i),
                    disabled: false,
                    readonly: true,
                },
                &format!("{i} star{}", if i == 1 { "" } else { "s" }),
                vec![],
                vec![],
            )
        })
        .collect();
    let control = rating_group::control(&props, Some(label_id.as_str()), vec![], items);
    let hidden = rating_group::hidden_input(&props, Some("rating"), &state.value_text(), vec![]);
    div(
        vec![("data-blocks-reviews-write-form-field", "")],
        vec![rating_group::root(
            Size::Md,
            ColorPalette::Accent,
            &props,
            vec![],
            vec![label, control, hidden],
        )],
    )
}

/// お題名（全幅・必須の `input`）。
fn title_field() -> Node {
    text_field(
        field_id("title"),
        "タイトル",
        "text",
        "off",
        "ひとことで言うと",
    )
}

/// 本文（必須の `textarea`）。
fn body_field() -> Node {
    let id = field_id("body");
    let props = FieldProps {
        id: id.as_str(),
        ids: FieldIds::default(),
        disabled: false,
        invalid: false,
        required: true,
        readonly: false,
        has_helper_text: false,
    };
    field::root(
        &orientation(),
        &props,
        vec![("data-blocks-reviews-write-form-field", "")],
        vec![
            field::label(&props, vec![], vec![text("本文")]),
            textarea::textarea(
                &TextareaProps::default(),
                &props,
                false,
                vec![
                    ("placeholder", "実際に使ってみた感想をご記入ください。"),
                    ("data-blocks-reviews-write-form-body", ""),
                ],
                vec![],
            ),
        ],
    )
}

/// `reviews-write-form` の Demo 本体。呼び出しごとに同一の `Node` を
/// 返す純関数（`crate::blocks` モジュール doc「静的表示」節）。
#[must_use]
pub fn demo() -> Node {
    div(
        vec![("class", "blocks-reviews-write-form-layout")],
        vec![
            heading::heading(
                HeadingLevel::H3,
                &HeadingProps::default(),
                vec![],
                vec![text("レビューを書く")],
            ),
            text_field(field_id("name"), "名前", "text", "name", "山田 太郎"),
            text_field(
                field_id("email"),
                "メールアドレス",
                "email",
                "email",
                "you@example.com",
            ),
            rating_field(),
            title_field(),
            body_field(),
            button::button(
                &ButtonProps::default(),
                vec![("data-blocks-reviews-write-form-submit", "")],
                vec![text("レビューを投稿する")],
            ),
        ],
    )
}