import { Users } from './fixtures/userStates';
import { AdminSettings } from './page-objects';
import { setSettingValueById } from './utils';
import { test, expect } from './utils/test';

test.use({ storageState: Users.admin.state });

test.describe.serial('settings-persistence-on-ui-navigation', () => {
	test.beforeAll(({ api }) => setSettingValueById(api, 'Hide_System_Messages', []));

	test.beforeEach(async ({ page }) => {
		await new AdminSettings(page).gotoSection('Message');

		// Intercept the API call and delay its response
		await page.route('/api/v1/method.call/saveSettings', async (route) => {
			const response = await route.fetch();
			await new Promise((resolve) => setTimeout(resolve, 2000)); // Delay the response by 2 seconds
			return route.fulfill({
				response,
				status: response.status(),
				headers: response.headers(),
				body: await response.body(),
			});
		});
	});

	test.afterAll(({ api }) => setSettingValueById(api, 'Hide_System_Messages', []));

	test.skip('expect settings to persist in ui when navigating back and forth', async ({ page }) => {
		const settingInput = page.getByLabel('Hide_System_Messages').getByRole('textbox');

		await settingInput.pressSequentially('User joined');
		await settingInput.press('Enter');

		const responsePromise = page.waitForResponse(
			(response) => response.url().includes('/api/v1/method.call/saveSettings') && response.status() === 200,
		);

		await page.getByRole('button', { name: 'Save changes' }).click();
		await page.getByRole('button', { name: 'Back' }).click();

		await responsePromise;

		await page.locator('a[href="/admin/settings/Message"] >> text=Open').click();

		await expect(page.getByLabel('Hide_System_Messages').getByRole('option', { name: 'User joined' })).toBeVisible();
	});
});