import { test, expect, Page } from '@playwright/test';
import { strictEqual } from 'assert';
import { formToJSON } from 'axios';
import { exec } from 'child_process';
import e from 'express';
import { ToastHeader } from 'react-bootstrap';
import { toHandlerKey } from 'vue';

let page: Page;
let isLoginSuccessful = false;

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

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

async function login(page) {
  try {
    // Login
    await page.goto('/');
    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');

    // เข้าสู่เมนูลูกค้า
    await page.click('id=menu.manage');
    await page.waitForSelector('id=sub-menu-customer');
    await page.click('id=sub-menu-customer');

    isLoginSuccessful = true;
    console.log('Login สำเร็จ');
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการ Login', error);
    isLoginSuccessful = false;
  }
}

test('Login', async () => {
  await login(page);
});

test('ทดสอบการสร้างนายจ้างบุคคลธรรมดาในกรณีที่ไม่กรอกข้อมูล', async () => {
  if (!isLoginSuccessful) {
    await login(page);
  }

  try {
    await page.waitForTimeout(1000);
    await page.click('id=btn-add');
    await page.click('id=add-customer-natural-person');
    await page.click("//button[@type='submit']");

    const expectedErrors = [
      {
        locator: "(//div[@class='q-field__messages col'])[1]",
        message: 'จำเป็นต้องกรอกข้อมูลนี้',
      },
      {
        locator: "(//div[@class='q-field__messages col'])[2]",
        message: 'จำเป็นต้องกรอกข้อมูลนี้',
      },
      {
        locator: "(//div[@class='q-field__messages col'])[3]",
        message: 'จำเป็นต้องกรอกข้อมูลนี้',
      },
      {
        locator: "(//div[@class='q-field__messages col'])[4]",
        message: 'จำเป็นต้องกรอกข้อมูลนี้',
      },
      {
        locator: "(//div[@class='q-field__messages col'])[5]",
        message: 'จำเป็นต้องกรอกข้อมูลนี้',
      },
      {
        locator: "(//div[@class='q-field__messages col'])[6]",
        message: 'โปรดเลือกวันเดือนปีเกิด',
      },
    ];

    for (const error of expectedErrors) {
      const locator = page.locator(error.locator);
      await expect(locator).toHaveText(error.message);
    }

    console.log('ตรวจสอบการแจ้งเตือนทั้งหมดถูกต้อง');
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการทดสอบ', error);
    isLoginSuccessful = false;
    throw error;
  }
  await page.waitForTimeout(2000);
  await page.click('id=btn-form-close');
});

test('ทดสอบการสร้างนายจ้างบุคคลธรรมดาในกรณีที่กรอกข้อมูลเฉพาะส่วนเกี่ยวกับ', async () => {
  if (!isLoginSuccessful) {
    await login(page);
  }

  try {
    await page.click('id=btn-add');
    await page.click('id=add-customer-natural-person');
    await page.fill('id=input-legal-person-no', '1222202282262');
    await page.click('id=form-select-prefix-name');
    await page.waitForSelector('id=form-select-prefix-name_0');
    await page.click('id=form-select-prefix-name_0');
    await page.fill("(//input[@id='form-input-first-name'])[1]", 'มานะ');
    await page.fill("(//input[@id='form-input-last-name'])[1]", 'แมน');
    await page.fill("(//input[@id='form-input-first-name'])[3]", 'Mana');
    await page.fill("(//input[@id='form-input-last-name'])[2]", 'Man');
    await page.click('id=form-input-birth-date');
    await page.click("(//button[@class='dp__btn dp__month_year_select'])[2]");
    await page.waitForSelector("//div[text()='2002']");
    await page.click("//div[text()='2002']");
    await page.click("(//button[@class='dp__btn dp__month_year_select'])[1]");
    await page.click("//div[text()='พ.ค.']");
    await page.click("//div[@id='2002-05-02']/div[1]");
    await page.click("//button[@type='submit']");

    // รอการเกิด Dialog
    const textPopupError = await page.locator(
      "//span[normalize-space(text())='กรอกข้อมูลไม่ครบ']",
    );
    const detailPopupError = await page.locator(
      "//span[normalize-space(text())='กรอกข้อมูลไม่ครบในหน้า ข้อมูลธุรกิจ, ที่อยู่นายจ้าง']",
    );

    await expect(textPopupError).toHaveText('กรอกข้อมูลไม่ครบ');
    await expect(detailPopupError).toHaveText(
      'กรอกข้อมูลไม่ครบในหน้า ข้อมูลธุรกิจ, ที่อยู่นายจ้าง',
    );

    console.log('ตรวจสอบการแจ้งเตือน Pop-up สำเร็จ');
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการทดสอบ', error);
    isLoginSuccessful = false;
    throw error;
  }
  await page.waitForSelector('id=btn-ok-dialog');
  await page.click('id=btn-ok-dialog');

  await page.waitForTimeout(2000);
  await page.click('id=btn-form-close');
});

test('ทดสอบการสร้างนายจ้างบุคคลธรรมดาในกรณีที่ไม่ได้กรอกข้อมูลส่วนข้อมูลธุรกิจ', async () => {
  if (!isLoginSuccessful) {
    await login(page);
  }
  try {
    await page.click('id=btn-add');
    await page.click('id=add-customer-natural-person');
    await page.click("(//div[@aria-selected='false'])[2]");
    await page.click("//button[@type='submit']");

    const expectedErrors = [
      {
        locator: "(//div[@class='q-field__messages col']//div)[1]",
        message: 'จำเป็นต้องกรอกข้อมูลนี้',
      },
      {
        locator: "(//div[@class='q-field__messages col']//div)[2]",
        message: 'จำเป็นต้องกรอกข้อมูลนี้',
      },
      {
        locator: "(//div[@class='q-field__messages col']//div)[3]",
        message: 'จำเป็นต้องกรอกข้อมูลนี้',
      },
      {
        locator: "(//div[@class='q-field__messages col']//div)[4]",
        message: 'จำเป็นต้องกรอกข้อมูลนี้',
      },
    ];

    for (const error of expectedErrors) {
      const locator = page.locator(error.locator);
      await expect(locator).toHaveText(error.message);
    }

    console.log('ตรวจสอบการแจ้งเตือนสำเร็จ');
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการทดสอบ', error);
    isLoginSuccessful = false;
    throw error;
  }
  await page.waitForTimeout(2000);
  await page.click('id=btn-form-close');
});

test('ทดสอบการสร้างนายจ้างบุคคลธรรมดาในกรณีที่กรอกข้อมูลเฉพาะส่วนข้อมูลธุรกิจ', async () => {
  if (!isLoginSuccessful) {
    await login(page);
  }

  try {
    await page.click('id=btn-add');
    await page.click('id=add-customer-natural-person');
    await page.click("(//div[@aria-selected='false'])[2]");
    await page.click('id=form-select-business-type');
    await page.waitForSelector('id=form-select-business-type_1');
    await page.click('id=form-select-business-type_1');
    await page.click('id=form-select-job-position');
    await page.waitForSelector('id=form-select-job-position_1');
    await page.click('id=form-select-job-position_1');
    await page.fill('id=form-input-job-description', 'รายละเอียด');
    await page.fill("(//input[@id='form-input-pay-rate'])[1]", 'วันจ่ายเงิน');
    await page.fill("(//input[@id='form-input-pay-rate'])[2]", 'Pay Day');
    await page.fill("(//input[@id='form-input-pay-rate'])[3]", '2000');
    await page.fill("//input[@aria-label='อัตราค่าจ้าง/วัน (Text)']", '2000');
    await page.click("//button[@type='submit']");

    // รอการเกิด Dialog
    const textPopupError = await page.locator(
      "//span[normalize-space(text())='กรอกข้อมูลไม่ครบ']",
    );

    const detailPopupError = await page.locator(
      "//span[normalize-space(text())='กรอกข้อมูลไม่ครบในหน้า เกี่ยวกับ, ที่อยู่นายจ้าง']",
    );

    await expect(textPopupError).toHaveText('กรอกข้อมูลไม่ครบ');
    await expect(detailPopupError).toHaveText(
      'กรอกข้อมูลไม่ครบในหน้า เกี่ยวกับ, ที่อยู่นายจ้าง',
    );
    console.log('การแจ้งเตือนถูกต้อง');
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการทดสอบ', error);
    isLoginSuccessful = false;
    throw error;
  }
  await page.waitForSelector('id=btn-ok-dialog');
  await page.click('id=btn-ok-dialog');

  await page.waitForTimeout(2000);
  await page.click('id=btn-form-close');
});

test('ทดสอบการสร้างนายจ้างบุคคลธรรมดาในกรณีที่ไม่กรอกข้อมูลส่วนที่อยู่นายจ้าง', async () => {
  if (!isLoginSuccessful) {
    await login(page);
  }

  try {
    await page.click('id=btn-add');
    await page.click('id=add-customer-natural-person');
    await page.click("(//div[@aria-selected='false'])[3]");
    await page.click("//button[@type='submit']");

    const expectedErrors = [
      {
        locator: "(//div[@class='q-field__messages col']//div)[1]",
        message: 'จำเป็นต้องกรอกข้อมูลนี้',
      },
      {
        locator: "(//div[@class='q-field__messages col']//div)[2]",
        message: 'จำเป็นต้องกรอกข้อมูลนี้',
      },
      {
        locator: "(//div[@class='q-field__messages col']//div)[3]",
        message: 'โปรดเลือกจังหวัด',
      },
      {
        locator: "(//div[@class='q-field__messages col']//div)[4]",
        message: 'โปรดเลือกเขต/อำเภอ',
      },
      {
        locator: "(//div[@class='q-field__messages col']//div)[5]",
        message: 'โปรดเลือกแขวง/ตำบล',
      },
      {
        locator: "(//div[@class='q-field__messages col']//div)[6]",
        message: 'จำเป็นต้องกรอกข้อมูลนี้',
      },
    ];

    for (const error of expectedErrors) {
      const locator = page.locator(error.locator);
      await expect(locator).toHaveText(error.message);
    }

    console.log('ตรวจสอบการแจ้งเตือนสำเร็จ');
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการทดสอบ', error);
    isLoginSuccessful = false;
    throw error;
  }
  await page.waitForTimeout(2000);
  await page.click('id=btn-form-close');
});

test('ทดสอบการสร้างนายจ้างบุคคลธรรมดาในกรณีที่กรอกข้อมูลรหัสประจำบ้านไม่ครบ 11 หลัก', async () => {
  if (!isLoginSuccessful) {
    await login(page);
  }

  try {
    await page.click('id=btn-add');
    await page.click('id=add-customer-natural-person');
    await page.click("(//div[@aria-selected='false'])[3]");

    await page.fill("(//input[@id='form-input-address'])[1]", '111');
    await page.click("//button[@type='submit']");

    // กำหนดค่าการแจ้งเตือน
    const codeAddress = await page.locator(
      "(//div[@class='q-field__messages col']//div)[1]",
    );
    // ตรวจสอบการแจ้งเตือน
    expect(codeAddress).toHaveText('ข้อมูลไม่ถูกต้อง กรุณากรอกให้ครบ 11 หลัก');

    console.log('ตรวจสอบการแจ้งเตือนสำเร็จ');
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการทดสอบ', error);
    isLoginSuccessful = false;
    throw error;
  }
  await page.waitForTimeout(2000);
  await page.click('id=btn-form-close');
});

test('ทดสอบการสร้างนายจ้างบุคคลธรรมดาในกรณีที่กรอกข้อมูลเฉพาะส่วนที่อยู่นายจ้าง', async () => {
  if (!isLoginSuccessful) {
    await login(page);
  }

  try {
    await page.waitForTimeout(1000);
    await page.click('id=btn-add');
    await page.click('id=add-customer-natural-person');
    await page.click("(//div[@aria-selected='false'])[3]");
    await page.fill("(//input[@id='form-input-address'])[1]", '22282202202');
    await page.fill('id=form-input-address-no', '800');
    await page.click('id=form-select-province');
    await page.waitForSelector('id=form-select-province_4');
    await page.click('id=form-select-province_4');
    await page.click('id=form-select-district');
    await page.waitForSelector('id=form-select-district_8');
    await page.click('id=form-select-district_8');
    await page.click('id=form-select-sub-district');
    await page.waitForSelector('id=form-select-sub-district_7');
    await page.click('id=form-select-sub-district_7');
    await page.fill('id=form-input-address-en', '800');
    await page.click("//button[@type='submit']");

    // รอการเกิด Dialog
    const textPopupError = await page.locator(
      "//span[normalize-space(text())='กรอกข้อมูลไม่ครบ']",
    );

    const detailPopupError = await page.locator(
      "//span[normalize-space(text())='กรอกข้อมูลไม่ครบในหน้า เกี่ยวกับ, ข้อมูลธุรกิจ']",
    );

    await expect(textPopupError).toHaveText('กรอกข้อมูลไม่ครบ');
    await expect(detailPopupError).toHaveText(
      'กรอกข้อมูลไม่ครบในหน้า เกี่ยวกับ, ข้อมูลธุรกิจ',
    );
    console.log('ตรวจสอบการแจ้งเตือนถูกต้อง');
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการทดสอบ', error);
    isLoginSuccessful = false;
    throw error;
  }
  await page.waitForSelector('id=btn-ok-dialog');
  await page.click('id=btn-ok-dialog');

  await page.waitForTimeout(2000);
  await page.click('id=btn-form-close');
});

test('ทดสอบการสร้างนายจ้างบุคคลธรรมดาในกรณีที่ไม่กรอกข้อมูลส่วนข้อมูลติดต่อ', async () => {
  if (!isLoginSuccessful) {
    await login(page);
  }

  try {
    await page.click('id=btn-add');
    await page.click('id=add-customer-natural-person');
    await page.click("(//div[@aria-selected='false'])[4]");
    await page.click("//button[@type='submit']");
    // รอการเกิด Dialog
    const textPopupError = await page.locator(
      "//span[normalize-space(text())='กรอกข้อมูลไม่ครบ']",
    );

    const detailPopupError = await page.locator(
      "//span[normalize-space(text())='กรอกข้อมูลไม่ครบในหน้า เกี่ยวกับ, ข้อมูลธุรกิจ, ที่อยู่นายจ้าง']",
    );

    await expect(textPopupError).toHaveText('กรอกข้อมูลไม่ครบ');
    await expect(detailPopupError).toHaveText(
      'กรอกข้อมูลไม่ครบในหน้า เกี่ยวกับ, ข้อมูลธุรกิจ, ที่อยู่นายจ้าง',
    );
    console.log('ตรวจสอบการแจ้งเตือนถูกต้อง');
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการทดสอบ', error);
    isLoginSuccessful = false;
    throw error;
  }
  await page.waitForSelector('id=btn-ok-dialog');
  await page.click('id=btn-ok-dialog');

  await page.waitForTimeout(2000);
  await page.click('id=btn-form-close');
});

test('ทดสอบการสร้างนายจ้างบุคคลธรรมดาในกรณีที่กรอกข้อมูลเฉพาะส่วนข้อมูลติดต่อ', async () => {
  if (!isLoginSuccessful) {
    await login(page);
  }

  try {
    await page.click('id=btn-add');
    await page.click('id=add-customer-natural-person');
    await page.click("(//div[@aria-selected='false'])[4]");
    await page.fill('id=form-input-contact-name', 'คุณอาท');
    await page.fill('id=form-input-mail', 'art@mail.com');
    await page.fill("(//input[@id='form-input-telephone'])[1]", '0882622426');
    await page.fill("(//input[@id='form-input-telephone'])[2]", '022222002');
    await page.click("//button[@type='submit']");
    // รอการเกิด Dialog
    const textPopupError = await page.locator(
      "//span[normalize-space(text())='กรอกข้อมูลไม่ครบ']",
    );

    const detailPopupError = await page.locator(
      "//span[normalize-space(text())='กรอกข้อมูลไม่ครบในหน้า เกี่ยวกับ, ข้อมูลธุรกิจ, ที่อยู่นายจ้าง']",
    );

    await expect(textPopupError).toHaveText('กรอกข้อมูลไม่ครบ');
    await expect(detailPopupError).toHaveText(
      'กรอกข้อมูลไม่ครบในหน้า เกี่ยวกับ, ข้อมูลธุรกิจ, ที่อยู่นายจ้าง',
    );
    console.log('ตรวจสอบการแจ้งเตือนถูกต้อง');
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการทดสอบ', error);
    isLoginSuccessful = false;
    throw error;
  }
  await page.waitForSelector('id=btn-ok-dialog');
  await page.click('id=btn-ok-dialog');

  await page.waitForTimeout(2000);
  await page.click('id=btn-form-close');
});

test('ทดสอบการสร้างนายจ้างบุคคลธรรมดาในกรณีที่กรอกรูปแบบอีเมลส่วนข้อมูลติดต่อไม่ถูกต้อง', async () => {
  if (!isLoginSuccessful) {
    await login(page);
  }

  try {
    await page.click('id=btn-add');
    await page.click('id=add-customer-natural-person');
    await page.click("(//div[@aria-selected='false'])[4]");
    await page.fill('id=form-input-mail', 'art');
    await page.click("//button[@type='submit']");
    // กำหนดค่าการแจ้งเตือน
    const emailFomatError = await page.locator(
      "//div[normalize-space(text())='ข้อมูลไม่ถูกต้อง']",
    );

    // ตรวจสอบการแจ้งเตือน
    expect(emailFomatError).toHaveText('ข้อมูลไม่ถูกต้อง');
    console.log('ตรวจสอบการแจ้งเตือนรูปแบบอีเมลไม่ถูกต้อง : Success ');
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการทดสอบ', error);
    isLoginSuccessful = false;
    throw error;
  }
  await page.waitForTimeout(2000);
  await page.click('id=btn-form-close');
});

test('ทดสอบการสร้างนายจ้างบุคคลธรรมดาในกรณีที่ไม่อัปโหลดข้อมูลส่วนเอกสาร', async () => {
  if (!isLoginSuccessful) {
    await login(page);
  }

  try {
    await page.click('id=btn-add');
    await page.click('id=add-customer-natural-person');
    await page.click("(//div[@aria-selected='false'])[5]");
    await page.click("//button[@type='submit']");

    // รอการเกิด Dialog
    const textPopupError = await page.locator(
      "//span[normalize-space(text())='กรอกข้อมูลไม่ครบ']",
    );

    const detailPopupError = await page.locator(
      "//span[normalize-space(text())='กรอกข้อมูลไม่ครบในหน้า เกี่ยวกับ, ข้อมูลธุรกิจ, ที่อยู่นายจ้าง']",
    );

    await expect(textPopupError).toHaveText('กรอกข้อมูลไม่ครบ');
    await expect(detailPopupError).toHaveText(
      'กรอกข้อมูลไม่ครบในหน้า เกี่ยวกับ, ข้อมูลธุรกิจ, ที่อยู่นายจ้าง',
    );
    console.log('ตรวจสอบการแจ้งเตือนถูกต้อง');
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการทดสอบ', error);
    isLoginSuccessful = false;
    throw error;
  }
  await page.waitForSelector('id=btn-ok-dialog');
  await page.click('id=btn-ok-dialog');

  await page.waitForTimeout(2000);
  await page.click('id=btn-form-close');
});

// test('ทดสอบการสร้างนายจ้างบุคคลธรรมดาในกรณีที่อัปโหลดเอกสารเฉพาะส่วนเอกสาร', async () => {
//   await page.click('id=menu-icon-customer-management');
//   try {
//     await page.click('id=btn-add');
//     await page.click('id=add-customer-natural-person');
//     await page.click("(//div[@aria-selected='false'])[5]");
//     await page.click("//button[@type='submit']");

//     // กำหนดค่าแจ้งเตือน
//     const popupError = await page.locator(
//       "//span[normalize-space(text())='กรอกข้อมูลไม่ครบ']",
//     );

//     // ตรวจสอบการแจ้งเตือน
//     expect(popupError).toHaveText('กรอกข้อมูลไม่ครบ');
//     console.log('ตรวจสอบการแจ้งเตือนถูกต้อง');
//   } catch (error) {
//     console.error('เกิดข้อผิดพลาดในการทดสอบ', error);
//     throw error;
//   }
//   await page.waitForSelector('id=btn-ok-dialog');
//   await page.click('id=btn-ok-dialog');

//   await page.waitForTimeout(2000);
//   await page.click('id=btn-form-close');
// });