<?php

/**
 * The theme <html> shows. A bare `html` selector would be read as text to search for.
 */
function theme(string $attribute, string $value): string
{
    return "document.documentElement.getAttribute('{$attribute}') === '{$value}'";
}

it('follows the operating system while the visitor has not chosen', function () {
    visit('/material')->inDarkMode()
        ->assertScript(theme('data-theme', 'dark'))
        ->assertScript(theme('data-theme-choice', 'system'))
        ->assertNoJavaScriptErrors();

    visit('/material')->inLightMode()
        ->assertScript(theme('data-theme', 'light'));
});

it('keeps the visitor\'s choice over the operating system', function () {
    // The theme switch waits for Alpine (x-cloak); a press before then would find nothing to press.
    $page = visit('/material')->inDarkMode()
        ->waitForEvent('networkidle')
        ->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'")
        ->assertScript(theme('data-theme', 'dark'));

    $page->click('@theme-light')
        ->assertScript(theme('data-theme', 'light'))
        ->assertAttribute('@theme-light', 'aria-pressed', 'true')
        ->assertScript("localStorage.getItem('material-theme') === 'light'");

    $page->refresh()
        ->assertScript(theme('data-theme', 'light'))
        ->assertScript(theme('data-theme-choice', 'light'));
});

it('adopts an earlier toggle\'s choice once', function () {
    config(['livewire-material.theme.legacy_keys' => ['mary-theme']]);

    $page = visit('/material')->inLightMode()
        ->assertScript(theme('data-theme', 'light'));

    $page->script("localStorage.setItem('mary-theme', JSON.stringify('dark'))");

    $page->refresh()
        ->assertScript(theme('data-theme', 'dark'))
        ->assertScript("localStorage.getItem('mary-theme') === null")
        ->assertScript("localStorage.getItem('material-theme') === 'dark'");
});

it('repaints a section that sets its own theme', function () {
    $swatch = fn (int $index): string => "getComputedStyle(document.querySelectorAll('#colour [data-theme] .bg-primary')[{$index}]).backgroundColor";

    visit('/material')->inLightMode()
        ->assertScript(theme('data-theme', 'light'))
        ->assertScript("{$swatch(0)} !== {$swatch(1)}");
});