gallery-masonry

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

/// 段組みタイル 1 枚分の比率指定。`ratio_override` が `Some` のときは
/// `aspect` を [`AspectRatio::Auto`] にしたうえでラッパ属性値として使う
/// （モジュール doc「比率の与え方」節）。
struct Item {
    aspect: AspectRatio,
    ratio_override: Option<&'static str>,
}

const ITEMS: [Item; 9] = [
    Item {
        aspect: AspectRatio::Portrait,
        ratio_override: None,
    },
    Item {
        aspect: AspectRatio::Landscape,
        ratio_override: None,
    },
    Item {
        aspect: AspectRatio::Auto,
        ratio_override: Some("tall"),
    },
    Item {
        aspect: AspectRatio::Square,
        ratio_override: None,
    },
    Item {
        aspect: AspectRatio::Video,
        ratio_override: None,
    },
    Item {
        aspect: AspectRatio::Portrait,
        ratio_override: None,
    },
    Item {
        aspect: AspectRatio::Auto,
        ratio_override: Some("wide"),
    },
    Item {
        aspect: AspectRatio::Landscape,
        ratio_override: None,
    },
    Item {
        aspect: AspectRatio::Square,
        ratio_override: None,
    },
];

/// 見出しエリア（タグライン → 見出し → 説明）。
fn header() -> Node {
    let eyebrow = badge::badge(&BadgeProps::default(), vec![], vec![text("Gallery")]);
    let title = styled_heading::heading(
        HeadingLevel::H3,
        &HeadingProps {
            size: HeadingSize::Xl3,
            ..HeadingProps::default()
        },
        vec![],
        vec![text("比率違いの画像を段組みで流し込む")],
    );
    let lead = styled_text::text(
        &TextProps {
            variant: TextVariant::Muted,
            ..TextProps::default()
        },
        vec![],
        vec![text(
            "比率の異なる 9 枚の画像を CSS の段組みへ流し込みます。sm 未満は 1 段、sm 以上で 2 段、lg 以上で 3 段になります。",
        )],
    );
    div(
        vec![("class", "blocks-gallery-masonry-header")],
        vec![eyebrow, title, lead],
    )
}

/// 段組み 1 タイル分（画像 1 枚）。`ratio_override` があればラッパへ
/// `data-blocks-gallery-masonry-ratio` 属性を付与する。
fn item(entry: &Item) -> Node {
    let mut attrs = vec![("class", "blocks-gallery-masonry-item")];
    if let Some(ratio) = entry.ratio_override {
        attrs.push(("data-blocks-gallery-masonry-ratio", ratio));
    }
    div(
        attrs,
        vec![image::image(
            &ImageProps {
                aspect_ratio: entry.aspect,
                shape: ImageShape::Rounded,
                ..ImageProps::new(dummy_assets::PRODUCT_SRC, "")
            },
            vec![("data-blocks-gallery-masonry-image", "")],
        )],
    )
}

/// `gallery-masonry` の Demo 本体。呼び出しごとに同一の `Node` を返す
/// 純関数。
pub fn demo() -> Node {
    let grid = div(
        vec![("class", "blocks-gallery-masonry-grid")],
        ITEMS.iter().map(item).collect(),
    );
    div(
        vec![("class", "blocks-gallery-masonry-stack")],
        vec![header(), grid],
    )
}