"""Supplementary after-screenshots: sheet collapsed, sheet open (scrim+insight),
table scrolled right (fade + sticky Age). 390px, live site."""
from playwright.sync_api import sync_playwright

CHROME = '/home/ubuntu/.cache/ms-playwright/chromium-1243/chrome-linux64/chrome'
BASE = 'https://retire.krisforbes.ca/'
LS = 'retire-planner-v1'
A = {"province": "ON", "age": 45, "household": "single",
     "partner": {"age": 45, "income": 0, "rrsp": 0, "tfsa": 0, "nonreg": 0, "monthlyContribution": 0},
     "income": 85000, "rrsp": 250000, "tfsa": 60000, "nonreg": 40000, "monthlyContribution": 800,
     "retireAge": 65, "spendingAnnual": 60000, "cppStartAge": 65, "oasStartAge": 65,
     "pensionAnnual": 12000, "rentalAnnual": 0, "otherAnnual": 0,
     "realReturnPre": 3.5, "realReturnPost": 2.5, "inflation": 2.0, "lifeExp": 95,
     "interests": ["dock", "travel"]}
OUT = '/home/ubuntu/projects/retire-planner/audit/mobile-after'

SET_STATE = "([ls, a, step, screen]) => { localStorage.setItem(ls, JSON.stringify({ a: a, step: step, screen: screen })); }"

with sync_playwright() as pw:
    b = pw.chromium.launch(executable_path=CHROME, headless=True, args=['--no-sandbox', '--disable-dev-shm-usage'])
    ctx = b.new_context(viewport={'width': 390, 'height': 844}, device_scale_factor=3.0, is_mobile=True, has_touch=True,
                        user_agent='Mozilla/5.0 (iPhone; CPU iPhone OS 17_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.5 Mobile/15E148 Safari/604.1')
    p = ctx.new_page()
    p.goto(BASE, wait_until='networkidle')
    p.evaluate(SET_STATE, [LS, A, 3, 'quiz'])
    p.reload(wait_until='networkidle')
    p.wait_for_timeout(700)
    p.screenshot(path=OUT + '/iphone14-sheet-collapsed.png')
    p.click('.panel-h')
    p.wait_for_timeout(400)
    p.screenshot(path=OUT + '/iphone14-sheet-open.png')
    p.evaluate(SET_STATE, [LS, A, 0, 'results'])
    p.reload(wait_until='networkidle')
    p.wait_for_timeout(1200)
    p.evaluate("() => { document.querySelector('details.yearly').open = true; }")
    p.locator('#yr-table').scroll_into_view_if_needed()
    p.wait_for_timeout(400)
    p.evaluate("() => { document.querySelector('.tbl-wrap').scrollLeft = 168; }")
    p.wait_for_timeout(300)
    p.screenshot(path=OUT + '/iphone14-table-scrolled-right.png')
    print('SUPP-DONE')
    ctx.close()
    b.close()