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

let page: Page;

test.beforeAll(async ({ browser }) => {
  page = await browser.newPage();
});

test.afterAll(async () => {
  if (page !== undefined) {
    await page.close();
  }
});

test('Login', async () => {
  // Login
  await page.goto('http://192.168.1.90:20001/');
  await expect(page).toHaveTitle(/^Sign in to /);
  await page.fill("input[name='username']", 'admin');
  await page.fill("input[name='password']", '1234');
  await page.click('id=kc-login');
  await page.waitForTimeout(2000);
  //   await page.click('id=acceptBtn');
});

test('ปิดสถานะการใช้งานบุคลากร', async () => {
  await page.click('id=menu-icon-personnel-management');
  try {
    await page.click('id=btn-kebab-action-employeem');

    await page.click('id=btn-kebab-status-employeem', {
      force: true,
    });
    await page.click('id=btn-ok-dialog');
    console.log('เปลี่ยนสถานะสำเร็จ');
    await page.reload();

    // รอ Update
    await page.waitForTimeout(2000);
    console.log('สถานะถูกเปลี่ยนแล้ว');

    // ตรวจสอบสีของแถวหลังจากทำการเปลี่ยนสถานะ
    const rowLocator = page.locator(
      "//div[normalize-space(text())='อานน รักมาก']",
    );
    const backgroundColor = await rowLocator.evaluate(
      (el) => window.getComputedStyle(el).backgroundColor,
    );

    // กำหนดสีหลัเปลี่ยนสถานะการใช้งาน
    const expectedColor = 'rgba(0, 0, 0, 0)';

    // ตรวจสอบสีที่เปลี่ยนไป
    expect(backgroundColor.trim()).toBe(expectedColor);
    console.log('สีของแถวถูกเปลี่ยนเป็นสีเทาอ่อน');
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการทดสอบ');
    throw error;
  }
  await page.waitForTimeout(2000);
});

test('เปิดสถานะการใช้งานบุคลากร', async () => {
  try {
    await page.click('id=btn-kebab-action-employeem');

    await page.click('id=btn-kebab-status-employeem', {
      force: true,
    });
    await page.click('id=btn-ok-dialog');
    console.log('เปลี่ยนสถานะสำเร็จ');
    await page.reload();

    // รอ Update
    await page.waitForTimeout(2000);
    console.log('สถานะถูกเปลี่ยนแล้ว');

    // ตรวจสอบสีของแถวหลังจากทำการเปลี่ยนสถานะ
    const rowLocator = page.locator(
      "//div[normalize-space(text())='อานน รักมาก']",
    );
    const backgroundColor = await rowLocator.evaluate(
      (el) => window.getComputedStyle(el).backgroundColor,
    );

    // กำหนดสีหลัเปลี่ยนสถานะการใช้งาน
    const expectedColor = 'rgba(0, 0, 0, 0)';

    // ตรวจสอบสีที่เปลี่ยนไป
    expect(backgroundColor.trim()).toBe(expectedColor);
    console.log('สีของแถวถูกเปลี่ยนเป็นของสถานะการใช้งาน');
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการทดสอบ');
    throw error;
  }
  await page.waitForTimeout(2000);
});