"""
Tests for the <chives-image> web component.
"""

import json

from playwright.sync_api import expect, Page
import pytest

from chives.media import create_video_entity


@pytest.fixture(autouse=True)
def setup_chives_video_component(page: Page) -> None:
    """
    Intercept the page, open a blank state, and load the chives-video
    component.
    """
    page.goto("about:blank")

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

    page.evaluate(component_js)


def test_render_basic_video(page: Page) -> None:
    """
    The <chives-image> component can render a basic video entity.
    """
    e = create_video_entity(
        video_path="tests/fixtures/media/wings_tracking_shot.mp4",
        poster_path="tests/fixtures/media/wings_tracking_shot.jpg",
    )
    page.evaluate(
        """
        const elem = document.createElement("chives-video");
        elem.videoEntity = %s;
        document.body.appendChild(elem);
        """
        % json.dumps(e),
    )

    chives_elem = page.locator("chives-video")

    video_elem = chives_elem.locator("video")
    expect(video_elem).to_be_visible()
    assert (
        video_elem.get_attribute("src")
        == "tests/fixtures/media/wings_tracking_shot.mp4"
    )
    assert video_elem.get_attribute("autoplay") is None
    assert video_elem.get_attribute("preload") == "none"


def test_video_with_autoplay(page: Page) -> None:
    """
    If a video entity has autoplay, then <chives-video> sets the autoplay
    attribute on the <video> element.
    """
    e = create_video_entity(
        video_path="tests/fixtures/media/wings_tracking_shot.mp4",
        poster_path="tests/fixtures/media/wings_tracking_shot.jpg",
        autoplay=True,
    )
    page.evaluate(
        """
        const elem = document.createElement("chives-video");
        elem.videoEntity = %s;
        document.body.appendChild(elem);
        """
        % json.dumps(e),
    )

    chives_elem = page.locator("chives-video")

    video_elem = chives_elem.locator("video")
    expect(video_elem).to_be_visible()
    assert video_elem.get_attribute("autoplay") == ""


@pytest.mark.parametrize(
    "width, height, orientation",
    [
        (100, 100, "square"),
        (200, 100, "landscape"),
        (100, 200, "portrait"),
    ],
)
def test_sets_orientation(
    page: Page, width: int, height: int, orientation: str
) -> None:
    """
    The <chives-video> element sets a data-orientation attribute.
    """
    e = create_video_entity(
        video_path="tests/fixtures/media/wings_tracking_shot.mp4",
        poster_path="tests/fixtures/media/wings_tracking_shot.jpg",
    )
    e["width"] = width
    e["height"] = height

    page.evaluate(
        """
        const elem = document.createElement("chives-video");
        elem.videoEntity = %s;
        document.body.appendChild(elem);
        """
        % json.dumps(e),
    )

    chives_elem = page.locator("chives-video")

    wrapper_elem = chives_elem.locator("div")
    expect(wrapper_elem).to_be_visible()
    assert (wrapper_elem).get_attribute("data-orientation") == orientation


def test_sets_subtitles(page: Page) -> None:
    """
    If a video entity has subtitles, then <chives-video> adds a <track>
    element for every subtitle.
    """
    e = create_video_entity(
        video_path="tests/fixtures/media/wings_tracking_shot.mp4",
        poster_path="tests/fixtures/media/wings_tracking_shot.jpg",
    )
    e["subtitles"] = [
        {"label": "English", "path": "wings_tracking_shot.en.vtt"},
        {"label": "French", "path": "wings_tracking_shot.FR.vtt"},
    ]

    page.evaluate(
        """
        const elem = document.createElement("chives-video");
        elem.videoEntity = %s;
        document.body.appendChild(elem);
        """
        % json.dumps(e),
    )

    chives_elem = page.locator("chives-video")

    video_elem = chives_elem.locator("video")
    assert video_elem.locator("track").count() == 2

    first_track = video_elem.locator("track").first
    assert first_track.get_attribute("label") == "English"
    assert first_track.get_attribute("src") == "wings_tracking_shot.en.vtt"


@pytest.mark.parametrize("subtitle_label", ["English (CC)"])
def test_subtitle_labels(page: Page, subtitle_label: str) -> None:
    """
    A video can have subtitles whose labels don't neatly map to
    HTML attribute names.
    """
    e = create_video_entity(
        video_path="tests/fixtures/media/wings_tracking_shot.mp4",
        poster_path="tests/fixtures/media/wings_tracking_shot.jpg",
    )
    e["subtitles"] = [
        {"label": subtitle_label, "path": "wings_tracking_shot.en.vtt"},
    ]

    page.evaluate(
        """
        const elem = document.createElement("chives-video");
        elem.videoEntity = %s;
        document.body.appendChild(elem);
        """
        % json.dumps(e),
    )

    chives_elem = page.locator("chives-video")

    video_elem = chives_elem.locator("video")
    track_elem = video_elem.locator("track")
    assert track_elem.get_attribute("label") == subtitle_label