import { expect, test } from "@playwright/test";
import { randomName } from "../../helpers";
import { beforeCoderTest } from "../../hooks";

test.beforeEach(async ({ page }) => await beforeCoderTest(page));

test("create user with password", async ({ page, baseURL }) => {
	await page.goto(`${baseURL}/users`, { waitUntil: "domcontentloaded" });
	await expect(page).toHaveTitle("Users - Coder");

	await page.getByRole("button", { name: "Create user" }).click();
	await expect(page).toHaveTitle("Create User - Coder");

	const name = randomName();
	const userValues = {
		username: name,
		name: name,
		email: `${name}@coder.com`,
		loginType: "password",
		password: "s3cure&password!",
	};

	await page.getByLabel("Username").fill(userValues.username);
	await page.getByLabel("Full name").fill(userValues.username);
	await page.getByLabel("Email").fill(userValues.email);
	await page.getByLabel("Login Type").click();
	await page.getByRole("option", { name: "Password", exact: false }).click();
	// Using input[name=password] due to the select element utilizing 'password'
	// as the label for the currently active option.
	const passwordField = page.locator("input[name=password]");
	await passwordField.fill(userValues.password);
	await page.getByRole("button", { name: "Create user" }).click();
	await expect(page.getByText("Successfully created user.")).toBeVisible();

	await expect(page).toHaveTitle("Users - Coder");
	await expect(page.locator("tr", { hasText: userValues.email })).toBeVisible();
});

test("create user without full name is optional", async ({ page, baseURL }) => {
	await page.goto(`${baseURL}/users`, { waitUntil: "domcontentloaded" });
	await expect(page).toHaveTitle("Users - Coder");

	await page.getByRole("button", { name: "Create user" }).click();
	await expect(page).toHaveTitle("Create User - Coder");

	const name = randomName();
	const userValues = {
		username: name,
		email: `${name}@coder.com`,
		loginType: "password",
		password: "s3cure&password!",
	};

	await page.getByLabel("Username").fill(userValues.username);
	await page.getByLabel("Email").fill(userValues.email);
	await page.getByLabel("Login Type").click();
	await page.getByRole("option", { name: "Password", exact: false }).click();
	// Using input[name=password] due to the select element utilizing 'password'
	// as the label for the currently active option.
	const passwordField = page.locator("input[name=password]");
	await passwordField.fill(userValues.password);
	await page.getByRole("button", { name: "Create user" }).click();
	await expect(page.getByText("Successfully created user.")).toBeVisible();

	await expect(page).toHaveTitle("Users - Coder");
	await expect(page.locator("tr", { hasText: userValues.email })).toBeVisible();
});
