import { expect, test } from "@playwright/test"
import type { Locator } from "@playwright/test"

export { expect }

/**
 * The dev server URL of a source module, in the form Vite rewrites imports to. A different spelling, such as
 * `/@fs//Users/...`, loads a second instance of the module, whose contexts the rest of the page never provides.
 */
export const sourceURL = (url: URL) => `/@fs${url.pathname}`

export const story = test.extend<{
  mount: (
    id: string,
    options?: { args?: Record<string, string | boolean>; globals?: Record<string, string> },
  ) => Promise<Locator>
}>({
  mount: async ({ page }, use) => {
    await use(async (id, options) => {
      const query = new URLSearchParams({ id })
      if (options?.args) {
        query.set(
          "args",
          Object.entries(options.args)
            .map(([key, value]) => `${key}:${value}`)
            .join(";"),
        )
      }
      if (options?.globals) {
        query.set(
          "globals",
          Object.entries(options.globals)
            .map(([key, value]) => `${key}:${value}`)
            .join(";"),
        )
      }
      await page.goto(`/?${query}`)
      const root = page.locator("#story-root")
      await expect(root).toBeVisible({ timeout: 30_000 })
      return root
    })
  },
})