import { expect, test } from '@playwright/test'
import { signIn, unique } from './fixtures'

test('shows leading and lagging indicators with charts that have table views', async ({ page }) => {
  await signIn(page, 'safety_manager')
  await page.goto('/analytics?range=365')
  await expect(page.getByRole('heading', { name: 'Leading indicators' })).toBeVisible()
  await expect(page.getByText('Hazards & near misses reported')).toBeVisible()
  await expect(page.getByRole('heading', { name: 'Lagging indicators' })).toBeVisible()

  // Every chart has a table view
  const trend = page.locator('figure').filter({ hasText: 'Reports per' })
  await trend.getByRole('button', { name: 'Table' }).click()
  await expect(trend.getByRole('columnheader', { name: 'Hazards & near misses' })).toBeVisible()
})

test('filters and saved views', async ({ page, isMobile }) => {
  test.skip(isMobile, 'Covered on desktop')
  await signIn(page, 'supervisor')
  await page.goto('/analytics')
  await page.getByLabel('Date range').selectOption('30')
  await page.getByLabel('Incident type').selectOption('hazard')
  await expect(page).toHaveURL(/range=30/)
  await expect(page).toHaveURL(/type=hazard/)

  const name = unique('Hazards this month')
  await page.getByRole('button', { name: 'Save view' }).click()
  await page.getByLabel('View name').fill(name)
  await page.getByRole('button', { name: 'Save', exact: true }).click()
  await expect(page.getByLabel('Saved views')).toHaveValue(/.+/)

  // Clearing the filters and picking the view brings them back
  await page.goto('/analytics')
  await expect(page.getByLabel('Incident type')).toHaveValue('')
  await page.getByLabel('Saved views').selectOption({ label: name })
  await expect(page.getByLabel('Incident type')).toHaveValue('hazard')
  await expect(page.getByLabel('Date range')).toHaveValue('30')
})