ナビゲーション

use hypersig::html::div;
use hypersig::style::Style;
use hypersig::style::pattern::stack;
use hypersig::style::value::{Display, raw, rem};
use hypersig::{Page, Rest, Signals};
use hypersig_ui::{Breadcrumb, NavList, PaginationText, pagination};
use serde::{Deserialize, Serialize};

use crate::doc::{Component, Doc};
use crate::{PAGE, Site};

#[derive(Signals, Serialize, Deserialize)]
pub struct Docs {
    title: String,
}

/// The component pages the pagination steps through.
const PAGES: [Component; 6] = [
    Component::Tabs,
    Component::Accordion,
    Component::Card,
    Component::Separator,
    Component::Navigation,
    Component::DataTable,
];

/// The path of `doc` inside this site, as `PAGE` takes it.
fn at(site: Site, doc: Doc) -> Rest {
    Rest::new(doc.url(site).trim_start_matches('/'))
}

pub fn page() -> Page<Docs> {
    let here = Doc::Components(Component::Navigation);
    let sections = NavList::new(
        "セクション",
        PAGE.url(at(site, here)),
    )
    .item(
        "インストール",
        PAGE,
        at(site, Doc::Components(Component::Installation)),
    )
    .item(
        "ナビゲーション",
        PAGE,
        at(site, here),
    )
    .item(
        "ダイアログ",
        PAGE,
        at(site, Doc::Components(Component::Dialog)),
    );
    let trail = Breadcrumb::new("パンくずリスト")
    .link(
        "コンポーネント",
        PAGE.link_with(&at(site, Doc::ComponentsHome)),
    )
    .current("ナビゲーション");
    let text = PaginationText {
        label: "ページ送り"
            .into(),
        previous: "前へ"
            .into(),
        next: "次へ"
            .into(),
    };
    let pager = pagination(
        5,
        6,
        |page| PAGE.link_with(&at(site, Doc::Components(PAGES[page as usize - 1]))),
        &text,
    );
    let initial = Docs {
        title: here.title(site).into(),
    };
    Page::new(
        "ドキュメント",
        initial,
    )
    .child(
        div()
            .css(
                Style::new()
                    .display(Display::Grid)
                    .grid_template_columns(raw("9rem 1fr"))
                    .gap(rem(1.5)),
            )
            .child(sections)
            .child(div().css(stack(rem(1.5))).child(trail).child(pager)),
    )
}