import { expect, test } from '@playwright/test'

const runtime = {
  id: 'container-a',
  name: 'account-a',
  state: 'running',
  status: 'Up',
  profile: 'creatorhub-profile-account-a',
  endpoint: 'http://account-a:9222',
}

test('keeps the create form inside a 900px viewport', async ({ page }) => {
  await page.route('**/api/browsers', route => route.fulfill({ json: [] }))
  await page.setViewportSize({ width: 900, height: 800 })
  await page.goto('/')

  await expect(page.getByRole('button', { name: '收起导航' }).first()).toBeVisible()
  const createButton = page.getByRole('button', { name: '创建环境' })
  await expect(createButton).toBeVisible()
  expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(900)
  const box = await createButton.boundingBox()
  expect(box).not.toBeNull()
  expect(box.x + box.width).toBeLessThanOrEqual(900)
})

test('shows the CDP endpoint only in the active branch at 900px and 599px', async ({ page }) => {
  await page.route('**/api/browsers', route => route.fulfill({ json: [runtime] }))
  const endpoint = page.getByText('http://account-a:9222')

  await page.setViewportSize({ width: 900, height: 800 })
  await page.goto('/')
  await expect(page.getByRole('cell', { name: 'http://account-a:9222' })).toBeVisible()
  await expect(endpoint.filter({ visible: true })).toHaveCount(1)

  await page.setViewportSize({ width: 599, height: 800 })
  await expect(page.getByRole('cell', { name: 'http://account-a:9222' })).toBeHidden()
  await expect(endpoint.filter({ visible: true })).toHaveCount(1)
})