gallery-split-carousel

use crate::blocks::dummy_assets;
use fandhe_frontend_core::{div, el, text, Node};
use fandhe_frontend_pre_styled_ui::badge::{self, BadgeProps};
use fandhe_frontend_pre_styled_ui::button::{self, ButtonProps, ButtonVariant};
use fandhe_frontend_pre_styled_ui::carousel::{self, Orientation};
use fandhe_frontend_pre_styled_ui::heading::{
    heading, HeadingLevel, HeadingProps, HeadingSize, HeadingWeight,
};
use fandhe_frontend_pre_styled_ui::icon::{icon, IconProps};
use fandhe_frontend_pre_styled_ui::image::{image, AspectRatio, ImageFit, ImageProps, ImageShape};
use fandhe_frontend_pre_styled_ui::text::{self as styled_text, TextProps};
use fandhe_frontend_pre_styled_ui::Size;

/// 自作の幾何アイコン（線画。`gallery_carousel::chevron` と同型）。
/// `path` へ `fill="none"` + `stroke="currentColor"` を明示し、`icon` の
/// `<svg>` 側が固定で持つ塗り面を上書きして線画として描画する。
fn chevron(path_d: &'static str) -> Node {
    icon(
        &IconProps::default(),
        vec![],
        vec![el(
            "path",
            vec![
                ("d", path_d),
                ("fill", "none"),
                ("stroke", "currentColor"),
                ("stroke-width", "2"),
                ("stroke-linecap", "round"),
                ("stroke-linejoin", "round"),
            ],
            vec![],
        )],
    )
}

/// 左向き山形（prev-trigger 用）。
fn chevron_left() -> Node {
    chevron("M15 18l-6-6 6-6")
}

/// 右向き山形（next-trigger 用）。
fn chevron_right() -> Node {
    chevron("M9 18l6-6-6-6")
}

/// 左列の見出し群（タグライン `badge` + セクション見出し + リード文 +
/// CTA `button`）。無 JS の静的デモのため CTA も常時操作不能にする
/// （モジュール doc「`<form>` を持たない」節）。
fn header() -> Node {
    div(
        vec![("class", "blocks-gallery-split-carousel-header")],
        vec![
            badge::badge(&BadgeProps::default(), vec![], vec![text("ギャラリー")]),
            heading(
                HeadingLevel::H3,
                &HeadingProps {
                    size: HeadingSize::Xl2,
                    weight: HeadingWeight::Bold,
                },
                vec![],
                vec![text("作品を見出しと並べて紹介")],
            ),
            styled_text::text(
                &TextProps::default(),
                vec![],
                vec![text(
                    "厳選した作品をカルーセルで紹介します。次の作品の端をちらりと覗かせます。",
                )],
            ),
            button::button(
                &ButtonProps {
                    variant: ButtonVariant::Outline,
                    disabled: true,
                    ..ButtonProps::default()
                },
                vec![],
                vec![text("すべての作品を見る")],
            ),
        ],
    )
}

/// スライド 1 枚分（`carousel::item` + [`image::image`]）。
///
/// レビュー指摘対応（`gallery_carousel::slide` と同じ判断の継承）:
/// 作品ギャラリーの画像は装飾ではなくカルーセルの主要コンテンツで
/// あるため `alt` を空文字列にしない。1-origin の連番を差し込んだ
/// `"作品{n}の画像"` を alt として与える（実企業名・PII は含まない）。
fn slide(index: usize, count: usize) -> Node {
    let sources = [
        dummy_assets::PRODUCT_SRC,
        dummy_assets::BACKGROUND_SRC,
        dummy_assets::SCREENSHOT_SRC,
        dummy_assets::LOGO_SRC,
    ];
    let src = sources[index % sources.len()];
    let alt = format!("作品{}の画像", index + 1);
    carousel::item(
        Orientation::Horizontal,
        index,
        count,
        index == 0,
        vec![("data-blocks-gallery-split-carousel-slide", "")],
        vec![image(
            &ImageProps {
                fit: ImageFit::Cover,
                aspect_ratio: AspectRatio::Video,
                shape: ImageShape::Rounded,
                ..ImageProps::new(src, &alt)
            },
            vec![("data-blocks-gallery-split-carousel-image", "")],
        )],
    )
}

/// 右列のカルーセル本体。viewport（クリップ済み静止領域）の下へ
/// 前後トリガーを右寄せで並べる（モジュール doc「前後ボタンを viewport
/// の下へ配置する理由」節）。
fn gallery() -> Node {
    const COUNT: usize = 5;
    let slides: Vec<Node> = (0..COUNT).map(|i| slide(i, COUNT)).collect();

    carousel::root(
        Size::Md,
        Orientation::Horizontal,
        "作品ギャラリー",
        vec![("data-blocks-gallery-split-carousel-root", "")],
        vec![carousel::control(
            Orientation::Horizontal,
            vec![("data-blocks-gallery-split-carousel-control", "")],
            vec![
                div(
                    vec![("class", "blocks-gallery-split-carousel-viewport")],
                    vec![carousel::item_group(
                        Orientation::Horizontal,
                        vec![],
                        slides,
                    )],
                ),
                div(
                    vec![("class", "blocks-gallery-split-carousel-triggers")],
                    vec![
                        carousel::prev_trigger(
                            Orientation::Horizontal,
                            true,
                            "前の画像",
                            vec![],
                            vec![chevron_left()],
                        ),
                        carousel::next_trigger(
                            Orientation::Horizontal,
                            true,
                            "次の画像",
                            vec![],
                            vec![chevron_right()],
                        ),
                    ],
                ),
            ],
        )],
    )
}

/// `gallery-split-carousel` の Demo 本体。呼び出しごとに同一の `Node` を
/// 返す純関数（`crate::blocks` モジュール doc「静的表示」節）。
pub fn demo() -> Node {
    div(
        vec![("class", "blocks-gallery-split-carousel-layout")],
        vec![header(), gallery()],
    )
}