"""Playwright E2E: mobile viewport /recipes — dashboard steps, dispenser flow."""

from __future__ import annotations

import pytest

from tests.e2e.conftest import E2E_DISP_ID, E2E_DISP_RECIPE_1, E2E_PERIOD_A

pytestmark = pytest.mark.e2e

MOBILE_VIEWPORT = {"width": 390, "height": 844}


def test_mobile_dispenser_period_recipe_steps(authenticated_page) -> None:
    page = authenticated_page
    page.set_viewport_size(MOBILE_VIEWPORT)
    page.locator(f'[data-action="select-dispenser"][data-dispenser-id="{E2E_DISP_ID}"]').click()
    page.wait_for_timeout(400)
    assert page.evaluate(
        "() => document.body.classList.contains('dashboard-mobile-step-periods')"
    )
    page.locator(f'[data-action="select-period"][data-period-id="{E2E_PERIOD_A}"]').click()
    page.wait_for_selector(
        f'[data-action="select-recipe"][data-recipe-id="{E2E_DISP_RECIPE_1}"]', timeout=10000
    )
    assert page.evaluate(
        "() => document.body.classList.contains('dashboard-mobile-step-recipes')"
    )


def test_mobile_back_from_recipes_to_periods(authenticated_page) -> None:
    page = authenticated_page
    page.set_viewport_size(MOBILE_VIEWPORT)
    page.locator(f'[data-action="select-dispenser"][data-dispenser-id="{E2E_DISP_ID}"]').click()
    page.locator(f'[data-action="select-period"][data-period-id="{E2E_PERIOD_A}"]').click()
    page.wait_for_selector('[data-action="mobile-dashboard-back"]', timeout=10000)
    page.locator('[data-action="mobile-dashboard-back"]').click()
    page.wait_for_timeout(400)
    assert page.evaluate(
        "() => document.body.classList.contains('dashboard-mobile-step-periods')"
    )


def test_mobile_drag_handles_present_on_recipe_list(two_periods_setup) -> None:
    page = two_periods_setup
    page.set_viewport_size(MOBILE_VIEWPORT)
    assert page.locator('[data-action="recipe-drag-handle"]').count() >= 2