import { test, expect } from "@playwright/test";

test.describe('mitarbeiter', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('http://localhost:4200');

    await page.getByRole('button').click();
    await page.waitForFunction(() => window.location.href.includes('keycloak'));
    await page.getByLabel('Username or email').fill('user');
    await page.getByLabel('Password').fill('test');
    await page.click('#kc-login');

    await page.goto('http://localhost:4200/mitarbeitererstellen');
  });

  test('pageShouldLoad', async ({ page }) => {
    await expect(page.getByText('Save')).toHaveCount(1);
  });

  test('backButtonShouldGoBack', async ({ page }) => {
    await page.getByText('Back').click();

    expect(page.url().includes('erstellen')).toBeFalsy();
  });

  test('EveryFieldShouldValidateEmptiness', async ({ page }) => {
    await page.getByText('Save').click();

    const errors = page.getByText('This field is required');

    await expect(errors).toHaveCount(6);
  });

  test('PhoneNumberShouldBeValidated', async ({ page }) => {
    await page.getByLabel('Phone').fill("asd");
    await page.getByText('Save').click();

    const error = page.getByText('This field must be a valid phone number');

    await expect(error).toHaveCount(1);
  });

  test('PostCodeShouldValidateTooShort', async ({ page }) => {
    await page.getByLabel('Postcode').fill("1");
    await page.getByText('Save').click();

    const error = page.getByText('The value is too short');

    await expect(error).toHaveCount(1);
  });

  test('PostCodeShouldValidateTooLong', async ({ page }) => {
    await page.getByLabel('Postcode').fill("123456");
    await page.getByText('Save').click();

    const error = page.getByText('The value is too long');

    await expect(error).toHaveCount(1);
  });

  test('CreationAndDeletion', async ({ page }) => {
    await page.getByLabel('First Name').fill('a');
    await page.getByLabel('Last Name').fill('a');
    await page.getByLabel('Street').fill('a');
    await page.getByLabel('Postcode').fill('12345');
    await page.getByLabel('City').fill('a');
    await page.getByLabel('Phone Number').fill('1234');

    await page.getByText('Save').click();
    expect(page.url().includes('erstellen')).toBeFalsy();

    // Wait for all "Delete" buttons to be attached to the DOM
    // await page.locator('text=Delete').waitFor({ state: 'attached', timeout: 10000 });

    // Ensure there are at least 3 "Delete" buttons
    const deleteButtons = page.locator('text=Delete');
    const deleteButtonCount = await deleteButtons.count();

    if (deleteButtonCount >= 3) {
      // Wait for the third "Delete" button to be visible
      const deleteButton = deleteButtons.nth(2);
      await deleteButton.waitFor({ state: 'visible', timeout: 5000 });
      await deleteButton.click();
    } else {
      throw new Error('Less than 3 "Delete" buttons found.');
    }

    const deletedEmployee = page.getByText('12345');
    await expect(deletedEmployee).toHaveCount(0, { timeout: 10000 });
  });
});