category-grid-overlay

use crate::blocks::dummy_assets;
use fandhe_frontend_core::{div, span, text, Node};
use fandhe_frontend_pre_styled_ui::heading::{self, HeadingLevel, HeadingProps, HeadingSize};
use fandhe_frontend_pre_styled_ui::image::{self, AspectRatio, ImageProps};
use fandhe_frontend_pre_styled_ui::link::{self, LinkProps, LinkVariant};
use fandhe_frontend_pre_styled_ui::link_overlay::{self, overlay};
use fandhe_frontend_pre_styled_ui::text::{self as styled_text, TextProps, TextSize};

/// リンク先の固定外部 URL（モジュール doc「リンク先の方針」節参照）。
const REPO: &str = "https://github.com/Fandhe-AI/fandhe-frontend";

/// カテゴリ 1 件分のダミーデータ（架空、実在の人物・企業とは無関係）。
struct Category {
    name: &'static str,
    description: &'static str,
}

/// 正方形タイル 8 件（Variant A、R0036 主参照）。
const CATEGORIES_SQUARE: [Category; 8] = [
    Category {
        name: "キッチン用品",
        description: "毎日の調理を支える定番アイテム",
    },
    Category {
        name: "文具",
        description: "書く・まとめる・持ち運ぶ道具一式",
    },
    Category {
        name: "照明",
        description: "空間の雰囲気を整える光源",
    },
    Category {
        name: "収納",
        description: "暮らしを整える棚・箱・ラック",
    },
    Category {
        name: "テキスタイル",
        description: "肌触りにこだわった布製品",
    },
    Category {
        name: "アウトドア",
        description: "屋外での時間を快適にする道具",
    },
    Category {
        name: "植物",
        description: "部屋に緑を添える鉢植え各種",
    },
    Category {
        name: "ギフト",
        description: "贈る相手を選ばない定番の贈り物",
    },
];

/// 縦長タイル 4 件（Variant B、R0035 の枚数 + R0610 の比率）。
const CATEGORIES_PORTRAIT: [Category; 4] = [
    Category {
        name: "キッチン用品",
        description: "毎日の調理を支える定番アイテム",
    },
    Category {
        name: "文具",
        description: "書く・まとめる・持ち運ぶ道具一式",
    },
    Category {
        name: "照明",
        description: "空間の雰囲気を整える光源",
    },
    Category {
        name: "収納",
        description: "暮らしを整える棚・箱・ラック",
    },
];

/// カテゴリタイル 1 件を組み立てる（モジュール doc「重なり順」節参照）。
fn tile(cat: &Category, ratio: AspectRatio) -> Node {
    link_overlay::root(
        vec![("data-blocks-category-grid-overlay-tile", "")],
        vec![
            image::image(
                &ImageProps {
                    aspect_ratio: ratio,
                    ..ImageProps::new(dummy_assets::PRODUCT_SRC, "")
                },
                vec![("data-blocks-category-grid-overlay-image", "")],
            ),
            div(
                vec![
                    ("class", "blocks-category-grid-overlay-scrim"),
                    ("aria-hidden", "true"),
                ],
                vec![],
            ),
            div(
                vec![("class", "blocks-category-grid-overlay-content")],
                vec![
                    styled_text::text(
                        &TextProps::default(),
                        vec![("data-blocks-category-grid-overlay-name", "")],
                        vec![text(cat.name)],
                    ),
                    styled_text::text(
                        &TextProps {
                            size: TextSize::Sm,
                            ..TextProps::default()
                        },
                        vec![],
                        vec![text(cat.description)],
                    ),
                ],
            ),
            overlay(
                REPO,
                vec![
                    ("aria-label", cat.name),
                    ("data-blocks-category-grid-overlay-overlay", ""),
                ],
                vec![],
            ),
        ],
    )
}

/// Variant A: 見出し行 + 正方形タイル 8 枚（R0036 主参照 + R0610 の見出し
/// 行）。
fn variant_square() -> Node {
    let tiles: Vec<Node> = CATEGORIES_SQUARE
        .iter()
        .map(|cat| tile(cat, AspectRatio::Square))
        .collect();
    div(
        vec![("class", "blocks-category-grid-overlay-variant")],
        vec![
            div(
                vec![("class", "blocks-category-grid-overlay-header")],
                vec![
                    heading::heading(
                        HeadingLevel::H3,
                        &HeadingProps {
                            size: HeadingSize::Xl2,
                            ..HeadingProps::default()
                        },
                        vec![],
                        vec![text("カテゴリから探す")],
                    ),
                    link::root(
                        REPO,
                        &LinkProps {
                            variant: LinkVariant::Underline,
                            ..LinkProps::default()
                        },
                        vec![],
                        vec![
                            text("すべてのカテゴリ"),
                            span(vec![("aria-hidden", "true")], vec![text(" \u{2192}")]),
                        ],
                    ),
                ],
            ),
            div(vec![("class", "blocks-category-grid-overlay-grid")], tiles),
        ],
    )
}

/// Variant B: 見出しなし + 縦長タイル 4 枚（R0035 の枚数 + R0610 の比率）。
fn variant_portrait() -> Node {
    let tiles: Vec<Node> = CATEGORIES_PORTRAIT
        .iter()
        .map(|cat| tile(cat, AspectRatio::Portrait))
        .collect();
    div(
        vec![("class", "blocks-category-grid-overlay-variant")],
        vec![div(
            vec![("class", "blocks-category-grid-overlay-grid")],
            tiles,
        )],
    )
}

/// `category-grid-overlay` の Demo 本体。呼び出しごとに同一の `Node` を
/// 返す純関数（モジュール doc「レイアウトと `@container` の理由」節）。
pub fn demo() -> Node {
    div(
        vec![("class", "blocks-category-grid-overlay")],
        vec![variant_square(), variant_portrait()],
    )
}