import { Icon } from "@/components/ui/Icon";
import {
  array,
  externalProps,
  get,
  str,
  type CatalogRecord,
} from "@/features/catalog/model";
export function Pagination({
  pagination,
}: {
  pagination: CatalogRecord | undefined;
}) {
  if (!pagination || !get(pagination, "Visible")) return null;
  const previous = !!get(pagination, "HasPrev"),
    next = !!get(pagination, "HasNext");
  const arrow = (forward = false) => (
    <>
      <Icon name="chevron-right" />
      <span className="hk-visually-hidden">{forward ? "下一页" : "上一页"}</span>
    </>
  );
  return (
    <nav className="hk-pagination" aria-label="分页">
      {previous ? (
        <a
          className="hk-pagination__btn hk-pagination__btn--prev"
          href={str(pagination, "PrevURL")}
          {...externalProps(get(pagination, "PrevURL"))}
          aria-label="上一页"
        >
          {arrow()}
        </a>
      ) : (
        <span
          className="hk-pagination__btn hk-pagination__btn--prev hk-is-disabled"
          aria-disabled="true"
        >
          {arrow()}
        </span>
      )}
      {array(get(pagination, "Items")).map((item, index) =>
        get(item, "Dots") ? (
          <span key={index} className="hk-pagination__ellipsis" aria-hidden="true">
            {str(item, "Label")}
          </span>
        ) : (
          <a
            key={index}
            className={`hk-pagination__page${get(item, "Active") ? " hk-is-active" : ""}`}
            href={str(item, "URL")}
            {...externalProps(get(item, "URL"))}
            aria-current={get(item, "Active") ? "page" : undefined}
          >
            {str(item, "Label")}
          </a>
        ),
      )}
      {next ? (
        <a
          className="hk-pagination__btn"
          href={str(pagination, "NextURL")}
          {...externalProps(get(pagination, "NextURL"))}
          aria-label="下一页"
        >
          {arrow(true)}
        </a>
      ) : (
        <span className="hk-pagination__btn hk-is-disabled" aria-disabled="true">
          {arrow(true)}
        </span>
      )}
      {str(pagination, "TotalText") && (
        <span className="hk-pagination__total">
          {str(pagination, "TotalText")}
        </span>
      )}
    </nav>
  );
}