import type { Page } from 'playwright'
import { openOverflow, settle, state, type Setup } from './editorLocalizationStates'
import { seoState } from './localizationMetadataStates'
import type { VisualState } from './states'

async function openDetails(page: Page) {
	const width = page.viewportSize()?.width ?? 0
	if (width < 1024) {
		await page
			.getByRole('button', { name: /^Details/ })
			.first()
			.click()
		await page.getByRole('dialog').waitFor()
	}
	await page
		.getByText('Public API URL', { exact: true })
		.locator('visible=true')
		.first()
		.waitFor()
	await settle(page)
}

async function openMenu(page: Page) {
	await openOverflow(page)
}

async function copyApiUrl(page: Page) {
	await page.evaluate(() => {
		Object.defineProperty(navigator, 'clipboard', {
			value: { writeText: async () => undefined },
			configurable: true,
		})
	})
	await openDetails(page)
	await page.getByRole('button', { name: 'Copy the public API URL' }).first().click()
	await page.getByText('API URL copied', { exact: true }).waitFor()
	await settle(page)
}

const PATTERN = 'https://journal.example.com/{lang}/{slug}'
const french: Setup = { suggestion: false }

export const surfacesStates: Record<string, VisualState> = {
	'loc.l12.home': { path: '/home', skip: 'clock-sensitive' },
	'loc.l12.homeFr': { path: '/home', skip: 'clock-sensitive' },
	'loc.l12.activity': { path: '/activity', skip: 'clock-sensitive' },
	'loc.l12.menu': state(french, openMenu),
	'loc.l12.apiCopy': state(french, copyApiUrl),
	'loc.l12.seoPreview': seoState(french, PATTERN, 'fr_FR', true),
	'loc.l12.siteFallback': seoState(french, PATTERN, 'fr_FR', true),
}