import Routing from '../../../../pages/eui/10x/routing-10x.js'
import CookieBannerActions from '../../../../actions/cookieBanner.js'
import UxMessageBoxPage from '../../../../pages/eui/10x/ux/ux-message-box-10x.po.js'
import CoUxButton from '../../../../components/10x/ux/ux-button.js'

describe('eUI - <ux-message-box> component object', async () => {
  let messBoxPage = new UxMessageBoxPage();
  it('should navigate to <ux-message-box> component', async () => {
    browser.addTestMeta({uuid:"405f4cf6-d1cb-4c55-b48a-aed3fb447965", zephyrKey: "CCQA-1035", zephyrStep: "396815", reportGroups: ["eUI.10x.ux"]});
    await messBoxPage.open(Routing.getUxComponentUrl('ux-message-box'));
    await CookieBannerActions.cookieBanner(true);
    let pgTitle = await $(messBoxPage.pageTitle);
    let appDocPageId = await $(messBoxPage.appDocPageById('ux-message-box'));
    let navigationList = await $(messBoxPage.navigationList);

    await expect(pgTitle).toBeDisplayed({wait:1000, message:'<ux-message-box> page title is not visible on page'});
    await expect(pgTitle).toHaveText('ux-message-box', {wait: 1000, message: 'Page title text is not as expected'});
    await expect(appDocPageId).toExist({wait:1000, message:'Page Id is not present in page'});
    await expect(navigationList).toBeDisplayed({wait:1000, message:'Navigation List -> is not visible on page'});
  });
  it('should verify the presence of the Component Object on the page', async () => {
    browser.addTestMeta({zephyrStep: "396816"});

    await expect(await $(messBoxPage.messageBoxFromSectionById('Default').currentPath)).toBeExisting({timeout: 5000,
      timeoutMsg: '<Default> section -> is not existing on page', interval: 100
    });

    let mBox1 = messBoxPage.messageBoxByIndex(1);
    await expect(await $(mBox1.dataE2E)).toBeExisting({ timeout: 1000,  timeoutMsg:
      'ux-message-box by index "1" is not existing on page', interval: 100 });

    await expect(await mBox1.defaultComponentsCount()).toBe(8,'There should be 8 <ux-message-box> components on the page.');
  });
  it('should verify component elements', async () => {
    browser.addTestMeta({zephyrStep: "396817"});

    let sectionId = 'acceptLabel-dismissLabel';
    let section = await $(messBoxPage.sectionById(sectionId));
    await section.scrollIntoView();

    let button = await $(messBoxPage.buttonFromSectionById(sectionId).buttonContent);
    await expect(button).toBeDisplayed({ message: 'Button from section ' + sectionId + ' is not visible on page' });
    await button.click();

    await browser.pause(300);
    let mBox = messBoxPage.messageBoxById("messagebox_default2");
    await expect(await mBox.uxModalCo.isModalHidden()).toBe('false');

    await expect(await mBox.uxModalCo.titleLabel()).toBe('WARNING');
    await expect(await $(mBox.bodyContent)).toHaveTextContaining('Are you sure you want to delete this file ?');
    await expect(await mBox.hasBodyIcon()).toBe(true, 'Message Box from section '+ sectionId + ' doesnt have a body icon');

    await (await mBox.dismissBtn()).click();
    await browser.pause(300);
    await expect(await mBox.uxModalCo.isModalHidden()).toBe('true');

  });
  it('should verify component acceptLabel and dismissLabel', async () => {
    browser.addTestMeta({zephyrStep: "396818"});

    let sectionId = 'acceptLabel-dismissLabel';
    let section = await $(messBoxPage.sectionById(sectionId));
    await section.scrollIntoView();

    let button = await $(messBoxPage.buttonFromSectionById(sectionId).buttonContent);
    await expect(button).toBeDisplayed({ message: 'Button from section ' + sectionId + ' is not visible on page' });
    await button.click();

    await browser.pause(300);
    let mBox = messBoxPage.messageBoxById("messagebox_default2");
    await expect(await mBox.uxModalCo.isModalHidden()).toBe('false');

    await expect(await mBox.acceptBtn()).toHaveTextContaining('YES DELETE IT');
    await expect(await mBox.dismissBtn()).toHaveTextContaining('NO KEEP IT');

    await (await mBox.dismissBtn()).click();
    await browser.pause(300);
    await expect(await mBox.uxModalCo.isModalHidden()).toBe('true');
  });
  it('should verify component typeClass = info', async () => {
    browser.addTestMeta({zephyrStep: "396819"});

    let sectionId = 'typeClass-info';
    let section = await $(messBoxPage.sectionById(sectionId));
    await section.scrollIntoView();

    let button = await $(messBoxPage.buttonFromSectionById(sectionId).buttonContent);
    await expect(button).toBeDisplayed({ message: 'Button from section ' + sectionId + ' is not visible on page' });
    await button.click();
    await browser.pause(300);

    let mBox = messBoxPage.messageBoxById("messagebox_info");
    await expect(await mBox.uxModalCo.isModalHidden()).toBe('false');
    await expect(await mBox.typeClass()).toBe('info');
    await expect(await mBox.uxModalCo.titleLabel()).toBe('INFORMATION');
    await expect(await $(mBox.bodyContent)).toHaveTextContaining('this is the message of the ux-message-box');
    await expect(await mBox.hasBodyIcon()).toBe(true, 'Message Box from section '+ sectionId + ' doesnt have a body icon.');

    await (await mBox.dismissBtn()).click();
    await browser.pause(300);
    await expect(await mBox.uxModalCo.isModalHidden()).toBe('true');
  });
  it('should verify component typeClass = success', async () => {
    browser.addTestMeta({zephyrStep: "396820"});

    let sectionId = 'typeClass-success';
    let section = await $(messBoxPage.sectionById(sectionId));
    await section.scrollIntoView();

    let button = await $(messBoxPage.buttonFromSectionById(sectionId).buttonContent);
    await expect(button).toBeDisplayed({ message: 'Button from section ' + sectionId + ' is not visible on page' });
    await button.click();
    await browser.pause(300);

    let mBox = messBoxPage.messageBoxById("messagebox_success");
    await expect(await mBox.uxModalCo.isModalHidden()).toBe('false');
    await expect(await mBox.typeClass()).toBe('success');
    await expect(await mBox.uxModalCo.titleLabel()).toBe('SUCCESS');
    await expect(await $(mBox.bodyContent)).toHaveTextContaining('this is the message of the ux-message-box');
    await expect(await mBox.hasBodyIcon()).toBe(true, 'Message Box from section '+ sectionId + ' doesnt have a body icon.');

    await (await mBox.dismissBtn()).click();
    await browser.pause(300);
    await expect(await mBox.uxModalCo.isModalHidden()).toBe('true');
  });
  it('should verify component typeClass = danger', async () => {
    browser.addTestMeta({zephyrStep: "396821"});

    let sectionId = 'typeClass-danger';
    let section = await $(messBoxPage.sectionById(sectionId));
    await section.scrollIntoView();

    let button = await $(messBoxPage.buttonFromSectionById(sectionId).buttonContent);
    await expect(button).toBeDisplayed({ message: 'Button from section ' + sectionId + ' is not visible on page' });
    await button.click();
    await browser.pause(300);

    let mBox = messBoxPage.messageBoxById("messagebox_danger");
    await expect(await mBox.uxModalCo.isModalHidden()).toBe('false');
    await expect(await mBox.typeClass()).toBe('danger');
    await expect(await mBox.uxModalCo.titleLabel()).toBe('ATTENTION');
    await expect(await $(mBox.bodyContent)).toHaveTextContaining('this is the message of the ux-message-box');
    await expect(await mBox.hasBodyIcon()).toBe(true, 'Message Box from section '+ sectionId + ' doesnt have a body icon.');

    await (await mBox.dismissBtn()).click();
    await browser.pause(300);
    await expect(await mBox.uxModalCo.isModalHidden()).toBe('true');
  });
  it('should verify component typeClass = question', async () => {
    browser.addTestMeta({zephyrStep: "397437"});

    let sectionId = 'typeClass-question';
    let section = await $(messBoxPage.sectionById(sectionId));
    await section.scrollIntoView();

    let button = await $(messBoxPage.buttonFromSectionById(sectionId).buttonContent);
    await expect(button).toBeDisplayed({ message: 'Button from section ' + sectionId + ' is not visible on page' });
    await button.click();
    await browser.pause(300);

    let mBox = messBoxPage.messageBoxById("messagebox_question");
    await expect(await mBox.uxModalCo.isModalHidden()).toBe('false');
    await expect(await mBox.typeClass()).toBe('question');
    await expect(await mBox.uxModalCo.titleLabel()).toBe('CONFIRMATION');
    await expect(await $(mBox.bodyContent)).toHaveTextContaining('this is the message of the ux-message-box');
    await expect(await mBox.hasBodyIcon()).toBe(true, 'Message Box from section '+ sectionId + ' doesnt have a body icon.');

    await (await mBox.dismissBtn()).click();
    await browser.pause(300);
    await expect(await mBox.uxModalCo.isModalHidden()).toBe('true');
  });
  it('should verify custom footer', async () => {
    browser.addTestMeta({zephyrStep: "397438"});

    let sectionId = 'content-uxMessageBoxFooter';
    let section = await $(messBoxPage.sectionById(sectionId));
    await section.scrollIntoView();

    let button = await $(messBoxPage.buttonFromSectionById(sectionId).buttonContent);
    await expect(button).toBeDisplayed({ message: 'Button from section ' + sectionId + ' is not visible on page' });
    await button.click();
    await browser.pause(300);

    let mBox = messBoxPage.messageBoxById("messagebox_custom-footer");
    await expect(await mBox.uxModalCo.isModalHidden()).toBe('false');

    let footer = mBox.messageBoxFooter;
    let relatedActionBtn = await (await new CoUxButton(footer).byTextContains('Related Action').element());
    await expect(relatedActionBtn).toBeDisplayed({ message: 'Custom button is not visible on message box' });

    await relatedActionBtn.click();
    await browser.pause(300);
    await expect(await mBox.uxModalCo.isModalHidden()).toBe('true');
  });
});
