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

test('Simple chore creation test', async ({ page }) => {
  // Navigate to chores
  await page.goto('/parent/tasks/chores')

  // Click the Create Chore FAB
  await page.getByRole('button', { name: 'Create Chore' }).click()

  // Wait for form to load
  await expect(page.locator('text=Chore Name')).toBeVisible()

  // Fill form using custom evaluation
  await page.evaluate(() => {
    // Fill name
    const nameInput = document.querySelector('input[type="text"], input:not([type])')
    if (nameInput) {
      nameInput.value = 'Simple Chore Test'
      nameInput.dispatchEvent(new Event('input', { bubbles: true }))
      nameInput.dispatchEvent(new Event('change', { bubbles: true }))
    }

    // Fill points
    const pointsInput = document.querySelector('input[type="number"]')
    if (pointsInput) {
      pointsInput.value = '5'
      pointsInput.dispatchEvent(new Event('input', { bubbles: true }))
      pointsInput.dispatchEvent(new Event('change', { bubbles: true }))
    }

    // Click first image to select it
    const firstImage = document.querySelector('img[alt*="Image"]')
    if (firstImage) {
      firstImage.click()
    }
  })

  // Wait a moment for validation to trigger
  await page.waitForTimeout(500)

  // Click Create button
  await page.getByRole('button', { name: 'Create' }).click()

  // Verify we're back on the list page and item was created
  // locate the name element, then move up to the row container
  const choreName = page.locator('text=Simple Chore Test').first()
  const choreRow = choreName.locator('..')
  await expect(choreRow).toBeVisible()
  // the row container should display the correct points value
  await expect(choreRow.locator('text=5 pts')).toBeVisible()
})