"""
Tests for the <chives-pagination-nav> web component.
"""

import json
from typing import Any

from playwright.sync_api import expect, Page
import pytest


def apply_pagination(
    page: Page, *, config: dict[str, Any], url_query: str, items: Any
) -> None:
    """
    Render a list of items and the pagination component on the page.
    """
    page.goto("about:blank")

    with open("javascript/chives-pagination.js") as f:
        component_js = f.read()

    page.evaluate(
        """
        %s
        const config = %s;
        const searchParams = new URLSearchParams(%s);
        const pagination = new ChivesPagination(config, searchParams);

        const items = %s;
        const itemsToShow = pagination.apply(items);

        const listOfItems = document.createElement("p");
        listOfItems.innerText = JSON.stringify(itemsToShow);
        document.body.appendChild(listOfItems);

        renderPaginationNav({
            "querySelector": "body",
            totalItems: items.length,
            pagination,
            searchParams,
        });
        """
        % (component_js, json.dumps(config), json.dumps(url_query), json.dumps(items))
    )


@pytest.mark.parametrize(
    "url_query, expected_items, expected_nav",
    [
        (
            "?page=1",
            "[1,2,3,4,5]",
            '<nav class="chives_pagination">'
            '<span class="page_indicator">Page 1 of 3</span>'
            '<a href="?page=2">next →</a>'
            "</nav>",
        ),
        (
            "?page=2",
            "[6,7,8,9,10]",
            '<nav class="chives_pagination">'
            '<a href="?page=1">← previous</a>'
            '<span class="page_indicator">Page 2 of 3</span>'
            '<a href="?page=3">next →</a>'
            "</nav>",
        ),
        (
            "?page=3",
            "[11,12,13,14,15]",
            '<nav class="chives_pagination">'
            '<a href="?page=2">← previous</a>'
            '<span class="page_indicator">Page 3 of 3</span>'
            "</nav>",
        ),
        (
            "?page=10",
            "[]",
            '<nav class="chives_pagination">'
            '<a href="?page=3">← previous</a>'
            '<span class="page_indicator">Page 10 of 3</span>'
            "</nav>",
        ),
    ],
)
def test_render_basic_pagination(
    page: Page, url_query: str, expected_items: str, expected_nav: str
) -> None:
    """
    The <chives-pagination> component renders basic pagination controls.
    """
    apply_pagination(
        page,
        config={"perPage": 5},
        url_query=url_query,
        items=[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
    )

    items_elem = page.locator("p")
    assert items_elem.inner_text() == expected_items

    pagination_elem = page.locator("chives-pagination-nav")
    expect(pagination_elem).to_be_visible()
    assert pagination_elem.inner_html() == expected_nav


def test_no_pagination_element_if_single_page(page: Page) -> None:
    """
    If there's only a single page, no navigation controls are shown.
    """
    apply_pagination(
        page,
        config={"perPage": 100},
        url_query="",
        items=[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    )

    pagination_elem = page.locator("chives-pagination-nav")
    expect(pagination_elem.locator("chives_pagination")).not_to_be_visible()