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

test('should display the list of guests', async ({ page }) => {
  await page.route('*/**/api/guests.json', async route => {
    const json = {
      data: [
        {
          "id": "f4a09c28-40ea-4553-90a5-96935a59cac6",
          "type": "guest",
          "attributes": {
            "id": "f4a09c28-40ea-4553-90a5-96935a59cac6",
            "group_id": "2fcb8b22-6b07-4c34-92e3-a2535dbc5b14",
            "status": "Tentative",
            "name": "Kristofer Rohan DVM",
            "group_name": "Childhood friends"
          }
        },
        {
          "id": "bd585c40-0937-4cde-960a-bb23acfd6f18",
          "type": "guest",
          "attributes": {
            "id": "bd585c40-0937-4cde-960a-bb23acfd6f18",
            "group_id": "da8edf26-3e1e-4cbb-b985-450c49fffe01",
            "status": "Invited",
            "name": "Olevia Quigley Jr.",
            "group_name": "Work"
          }
        },
      ]
    };

    await route.fulfill({json})
  })

  await page.goto('/dashboard/guests')

  await expect(page.getByRole('tab', { name: 'Groups' })).toBeVisible();
  await expect(page.getByRole('tab', { name: 'Guests' })).toBeVisible();

  await expect(page.getByText('There are 2 elements in the list')).toBeVisible();

  await expect(page.getByRole('row').nth(1).getByRole('cell', { name: 'Kristofer Rohan DVM' })).toBeVisible();
  await expect(page.getByRole('row').nth(1).getByRole('cell', { name: 'Childhood friends' })).toBeVisible();
  await expect(page.getByRole('row').nth(1).getByRole('cell', { name: 'Tentative' })).toBeVisible();
  await expect(page.getByRole('row').nth(1).getByRole('button', {name: 'Confirm'})).toBeVisible();
  await expect(page.getByRole('row').nth(1).getByRole('button', {name: 'Decline'})).toBeVisible();


  await expect(page.getByRole('row').nth(2).getByRole('cell', { name: 'Olevia Quigley Jr.' })).toBeVisible();
  await expect(page.getByRole('row').nth(2).getByRole('cell', { name: 'Work' })).toBeVisible();
  await expect(page.getByRole('row').nth(2).getByRole('cell', { name: 'Invited' })).toBeVisible();
  await expect(page.getByRole('row').nth(2).getByRole('button', {name: 'Confirm'})).toBeVisible();
  await expect(page.getByRole('row').nth(2).getByRole('button', {name: 'Tentative'})).toBeVisible();
  await expect(page.getByRole('row').nth(2).getByRole('button', {name: 'Decline'})).toBeVisible();
})