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

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

    await route.fulfill({ json })
  })
}

const mockGroupsAPI = ({ page }: { page: Page }) => {
  page.route('*/**/api/groups', async route => {
    const json = [
      {
        "id": "ee44ffb9-1147-4842-a378-9eaeb0f0871a",
        "name": "Pam's family",
        "icon": "pi pi-users",
        "parent_id": "cd9645e1-02c6-4fb9-bba6-1a960754b01c",
        "color": "#ff0000",
        "total": 3,
        "considered": 2,
        "invited": 1,
        "confirmed": 0,
        "declined": 0,
        "tentative": 0
      },
      {
        "id": "c8bda6ca-d8af-4bb8-b2bf-e6ec1c21b1e6",
        "name": "Pam's work",
        "icon": "pi pi-desktop",
        "parent_id": "cd9645e1-02c6-4fb9-bba6-1a960754b01c",
        "color": "#00ff00",
        "total": 2,
        "considered": 0,
        "invited": 0,
        "confirmed": 0,
        "declined": 0,
        "tentative": 2
      },
    ];

    await route.fulfill({ json })
  })
}

test('should display the list of guests', async ({ page }) => {
  await mockGuestsAPI({ page });

  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();
});

test('should allow changing the name of a guest', async ({ page }) => {
  await mockGuestsAPI({ page });

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

  await expect(page.getByRole('row').nth(1).getByRole('cell', { name: 'Kristofer Rohan DVM' })).toBeVisible();

  await page.getByRole('row').nth(1).getByRole('cell', { name: 'Kristofer Rohan DVM' }).click();
  await page.getByRole('textbox').clear();
  await page.getByRole('textbox').pressSequentially('John Snow');
  await page.getByRole('textbox').evaluate(e => e.blur());

  await expect(page.getByRole('row').nth(1).getByRole('cell', { name: 'John Snow' })).toBeVisible();
});

test('should display the list of groups', async ({ page }) => {
  await mockGroupsAPI({ page });

  await page.goto('/dashboard/guests');
  await page.getByRole('tab', { name: 'Groups' }).click();

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

  await expect(page.getByRole('row').nth(1).getByRole('cell', { name: "Pam's family" })).toBeVisible();
  await expect(page.getByRole('row').nth(2).getByRole('cell', { name: "Pam's work" })).toBeVisible();
});