promo-image-tiles

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

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

/// `base`（R1201 相当）の列ごとのタイル枚数配分（合計 7 枚）。
const BASE_COLUMNS: [usize; 3] = [2, 3, 2];

/// `dark`（R1197 相当）の列ごとのタイル枚数配分（合計 6 枚）。
const DARK_COLUMNS: [usize; 3] = [2, 2, 2];

/// `base` 形のコピー列（見出し → リード文 → CTA リンク 1 個）。
fn copy_base() -> Node {
    div(
        vec![("class", "blocks-promo-image-tiles-copy")],
        vec![
            styled_heading::heading(
                HeadingLevel::H3,
                &HeadingProps {
                    size: HeadingSize::Xl3,
                    ..HeadingProps::default()
                },
                vec![("data-blocks-promo-image-tiles-title", "")],
                vec![text("季節の新作、まとめてチェック")],
            ),
            styled_text::text(
                &TextProps {
                    size: TextSize::Lg,
                    variant: TextVariant::Muted,
                    ..TextProps::default()
                },
                vec![("data-blocks-promo-image-tiles-lead", "")],
                vec![text(
                    "入荷したばかりのアイテムをタイルでまとめてご紹介します。",
                )],
            ),
            link::root(
                REPO,
                &LinkProps {
                    external: true,
                    ..LinkProps::default()
                },
                vec![("data-blocks-promo-image-tiles-cta", "")],
                vec![text("GitHub で見る")],
            ),
        ],
    )
}

/// `dark` 形のコピー列（見出し → リード文 → 外部リンク）。
fn copy_dark() -> Node {
    div(
        vec![("class", "blocks-promo-image-tiles-copy")],
        vec![
            styled_heading::heading(
                HeadingLevel::H3,
                &HeadingProps {
                    size: HeadingSize::Xl3,
                    ..HeadingProps::default()
                },
                vec![("data-blocks-promo-image-tiles-title", "")],
                vec![text("限定アイテム、数量限り")],
            ),
            styled_text::text(
                &TextProps {
                    size: TextSize::Lg,
                    variant: TextVariant::Plain,
                    ..TextProps::default()
                },
                vec![("data-blocks-promo-image-tiles-lead", "")],
                vec![text(
                    "今季限定の生産本数で仕立てたアイテムを取り扱っています。",
                )],
            ),
            link::root(
                REPO,
                &LinkProps {
                    external: true,
                    ..LinkProps::default()
                },
                vec![("data-blocks-promo-image-tiles-link", "")],
                vec![text("GitHub で見る")],
            ),
        ],
    )
}

/// タイル 1 枚分（角丸・影はラッパ `div` 側で付ける、`hero_image_tiles`
/// と同型）。
fn tile() -> Node {
    div(
        vec![("class", "blocks-promo-image-tiles-tile")],
        vec![image::image(
            &ImageProps {
                aspect_ratio: AspectRatio::Portrait,
                ..ImageProps::new(dummy_assets::PRODUCT_SRC, "")
            },
            vec![("data-blocks-promo-image-tiles-image", "")],
        )],
    )
}

/// 列 1 本分（`count` 枚のタイルを縦に並べる）。
fn column(index: usize, count: usize) -> Node {
    let column_number = (index + 1).to_string();
    div(
        vec![
            ("class", "blocks-promo-image-tiles-column"),
            (
                "data-blocks-promo-image-tiles-column",
                column_number.as_str(),
            ),
        ],
        (0..count).map(|_| tile()).collect(),
    )
}

/// タイルのコラージュ（3 列、枚数配分は `columns`）。`aria-hidden` で
/// 支援技術から隠す（モジュール doc「タイルは `aria-hidden` + `alt=""`」
/// 節）。
fn collage(columns: &[usize]) -> Node {
    div(
        vec![
            ("class", "blocks-promo-image-tiles-collage"),
            ("aria-hidden", "true"),
        ],
        columns
            .iter()
            .enumerate()
            .map(|(i, &count)| column(i, count))
            .collect(),
    )
}

/// `base` 形（R1201 相当）1 件分。
fn instance_base() -> Node {
    div(
        vec![
            ("class", "blocks-promo-image-tiles-instance"),
            ("data-blocks-promo-image-tiles-tone", "base"),
        ],
        vec![copy_base(), collage(&BASE_COLUMNS)],
    )
}

/// `dark` 形（R1197 相当）1 件分。暗色帯は `data-blocks-promo-image-
/// tiles-tone="dark"` で判定する（モジュール doc「暗色帯」節）。
fn instance_dark() -> Node {
    div(
        vec![
            ("class", "blocks-promo-image-tiles-instance"),
            ("data-blocks-promo-image-tiles-tone", "dark"),
        ],
        vec![copy_dark(), collage(&DARK_COLUMNS)],
    )
}

/// `promo-image-tiles` の Demo 本体。`base`/`dark` の 2 形を縦に積んで
/// 並記する（モジュール doc「2 つの形を縦に並べて差分を示す」節）。
/// 呼び出しごとに同一の `Node` を返す純関数。
pub fn demo() -> Node {
    div(
        vec![("class", "blocks-promo-image-tiles-stack")],
        vec![instance_base(), instance_dark()],
    )
}