grid-list-file-thumbnails

use crate::blocks::dummy_assets;
use fandhe_frontend_core::{div, p, text, Node};
use fandhe_frontend_pre_styled_ui::button::{self, ButtonProps, ButtonVariant};
use fandhe_frontend_pre_styled_ui::image::{self, AspectRatio, ImageProps};
use fandhe_frontend_pre_styled_ui::list::{self, ListType, ListVariant};
use fandhe_frontend_pre_styled_ui::text::{self as styled_text, TextProps, TextSize, TextVariant};
use fandhe_frontend_pre_styled_ui::visually_hidden;

/// 架空のファイル名とサイズのセット（12 件。12 は 2/3/4 いずれの列数でも
/// 割り切れる最小公倍数のため、2/3/4 列のいずれでも最終行が埋まる）。実在の
/// 人名・社名・PII は含まない。
const FILES: [(&str, &str); 12] = [
    ("IMG_4821.jpg", "3.9 MB"),
    ("harbor-sunset.png", "2.4 MB"),
    ("team-offsite-04.jpg", "5.1 MB"),
    ("product-mockup-v2.png", "1.8 MB"),
    ("mountain-trail.jpg", "4.6 MB"),
    ("workshop-notes.png", "0.9 MB"),
    ("studio-shelf.jpg", "3.2 MB"),
    ("river-bridge-evening.jpg", "6.0 MB"),
    ("conference-badge.png", "0.7 MB"),
    ("rooftop-garden.jpg", "4.1 MB"),
    ("archive-notes-scan.png", "1.2 MB"),
    ("lakeside-cabin.jpg", "5.5 MB"),
];

/// [`FILES`] のインデックスへ循環割当するサムネイル `src` の候補
/// （`dummy_assets` の 5 種すべて。PR #3364 Codex(P2) 指摘の是正、モジュール
/// doc 参照）。
const THUMBNAIL_SRCS: [&str; 5] = [
    dummy_assets::PRODUCT_SRC,
    dummy_assets::AVATAR_SRC,
    dummy_assets::LOGO_SRC,
    dummy_assets::SCREENSHOT_SRC,
    dummy_assets::BACKGROUND_SRC,
];

/// キャプション（見出し代わりの短い説明文）。
fn caption() -> Node {
    p(
        vec![("class", "blocks-grid-list-file-thumbnails-caption")],
        vec![text("最近アップロードした画像")],
    )
}

/// グリッド 1 セル分（サムネイル全体を「詳細を表示」ボタンにし、下へ
/// ファイル名・サイズを表示する）。`thumbnail_src` は [`THUMBNAIL_SRCS`] を
/// 呼び出し側が循環割当した値。
fn cell(name: &str, size: &str, thumbnail_src: &str) -> Node {
    let sr_label = format!("{name} の詳細を表示");
    let trigger = button::button(
        &ButtonProps {
            variant: ButtonVariant::Plain,
            ..ButtonProps::default()
        },
        vec![("data-blocks-grid-list-file-thumbnails-trigger", "")],
        vec![
            image::image(
                &ImageProps {
                    aspect_ratio: AspectRatio::Landscape,
                    ..ImageProps::new(thumbnail_src, "")
                },
                vec![("data-blocks-grid-list-file-thumbnails-image", "")],
            ),
            visually_hidden::root(vec![], vec![text(&sr_label)]),
        ],
    );
    let meta = div(
        vec![("data-blocks-grid-list-file-thumbnails-meta", "")],
        vec![
            styled_text::text(&TextProps::default(), vec![], vec![text(name)]),
            styled_text::text(
                &TextProps {
                    variant: TextVariant::Muted,
                    size: TextSize::Sm,
                    ..TextProps::default()
                },
                vec![],
                vec![text(size)],
            ),
        ],
    );
    list::item(
        vec![("data-blocks-grid-list-file-thumbnails-item", "")],
        vec![trigger, meta],
    )
}

/// `grid-list-file-thumbnails` の Demo 本体。呼び出しごとに同一の `Node`
/// を返す純関数。
pub fn demo() -> Node {
    let items = FILES
        .iter()
        .enumerate()
        .map(|(i, (name, size))| cell(name, size, THUMBNAIL_SRCS[i % THUMBNAIL_SRCS.len()]))
        .collect();
    let grid = list::root(
        ListType::Unordered,
        ListVariant::Plain,
        vec![("data-blocks-grid-list-file-thumbnails-grid", "")],
        items,
    );
    div(
        vec![("class", "blocks-grid-list-file-thumbnails-stack")],
        vec![caption(), grid],
    )
}