import Routing from '../../../../pages/eui/10x/routing-10x.js'
import Euipage from '../../../../pages/eui/10x/eui/eui-badge-10x.po.js'
import CookieBannerActions from '../../../../actions/cookieBanner.js'

describe('eUI - <eui-badge> Component Object ', async () => {
  let page = new Euipage();
  let testFolder = './/eui-badge//';
  it('should navigate to <eui-badge> demo page', async () => {
    browser.addTestMeta({uuid:"23449ea0-ceac-11eb-b8bc-0242ac130003", zephyrKey: "CCQA-1106", zephyrStep: "407830", reportGroups: ["eUI.10x.eui"]});
    await page.open(Routing.getEUIComponentUrl('eui-badge'));
    await CookieBannerActions.cookieBanner(true);
    let pgTitle = await $(page.pageTitle);
    await pgTitle.scrollIntoView();
    await expect(await $(pgTitle)).toBeDisplayedInViewport({message:'<eui-badge> page title is not displayed on page'});
    await expect(await $(page.appDocPageById('eui-badge'))).toExist({message:'Page Id is not existing on page'});
    await chaiExpect(await pgTitle.getText()).equal('eui-badge', 'Page title text is not as expected');
    await expect(await $(page.navigationList)).toBeDisplayedInViewport({message:'Navigation List -> is not displayed on page'});
  });
  it('should verify the presence and number of component objects <eui-badge> on page ', async () => {
    browser.addTestMeta({zephyrStep: "407831"});
    let sectionId= 'Default';
    let scrollIntoSection = await $(page.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();
    let index = 1;
    let textContent = '9';
    let badgeByIndex1 = await page.badgeByIndex(index).element();
    let badgeByTextContents = await page.badgeByTextContains(textContent).element();
    let badgeByTextAndIndex1 = await page.badgeByTextEqualsAndIndex(textContent, index).element();

    await expect(await $(page.sectionById(sectionId))).toBeDisplayedInViewport({message:'<Default> section -> is not displayed on page'});
    await expect(badgeByIndex1).toBeDisplayedInViewport({message:'Badge with index "' + index + '" not displayed on page'});
    await expect(badgeByTextContents).toBeDisplayedInViewport({message:'Badge containing text: "' + textContent + '" not displayed on page'});
    await expect(badgeByTextAndIndex1).toBeDisplayedInViewport({message:'Badge with text: "' + textContent + '" and index: ' + index + ' is not displayed on page'});
    await chaiExpect(await page.badgeByIndex(index).defaultComponentsCount()).equal(28, 'There should be 28 <eui-badge> components on the page.');

    if(browser.config.useWdioImageComparison) {
      await badgeByIndex1.scrollIntoView();
      await chaiExpect(await browser.checkElement(badgeByIndex1, testFolder+'img_badgeByIndex1', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for badgeByIndex1');
      await chaiExpect(await browser.checkElement(badgeByTextContents, testFolder+'img_badgeByTextContains', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for badgeByTextContents');
      await chaiExpect(await browser.checkElement(badgeByTextAndIndex1, testFolder+'img_badgeByTextAndIndex1', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for badgeByTextAndIndex1');
    }
  });

  it('should verify the <eui-badge> color types', async () => {
    browser.addTestMeta({zephyrStep: "437245"});
    let sectionId = 'color-types';
    let sectionElement = await $(page.sectionById(sectionId));
    await expect(sectionElement).toExist('<' + sectionId + '> section -> does not exist on page');
    await sectionElement.scrollIntoView();

    let badgeColor1 = await page.badgeFromSectionWithIdByIndex(sectionId, 1).element();
    let badgeColor2 = await page.badgeFromSectionWithIdByIndex(sectionId, 2).element();
    let badgeColor3 = await page.badgeFromSectionWithIdByIndex(sectionId, 3).element();
    let badgeColor4 = await page.badgeFromSectionWithIdByIndex(sectionId, 4).element();
    let badgeColor5 = await page.badgeFromSectionWithIdByIndex(sectionId, 5).element();
    let badgeColor6 = await page.badgeFromSectionWithIdByIndex(sectionId, 6).element();

    await expect(badgeColor1).toHaveAttributeContaining('class','secondary');
    await expect(badgeColor2).toHaveAttributeContaining('class','primary');
    await expect(badgeColor3).toHaveAttributeContaining('class','info');
    await expect(badgeColor4).toHaveAttributeContaining('class','success');
    await expect(badgeColor5).toHaveAttributeContaining('class','warning');
    await expect(badgeColor6).toHaveAttributeContaining('class','danger');

    if(browser.config.useWdioImageComparison) {
      await chaiExpect(await browser.checkElement(badgeColor1, testFolder+'img_badgeColor1', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for badgeColor1');
      await chaiExpect(await browser.checkElement(badgeColor2, testFolder+'img_badgeColor2', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for badgeColor2');
      await chaiExpect(await browser.checkElement(badgeColor3, testFolder+'img_badgeColor3', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for badgeColor3');
      await chaiExpect(await browser.checkElement(badgeColor4, testFolder+'img_badgeColor4', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for badgeColor4');
      await chaiExpect(await browser.checkElement(badgeColor5, testFolder+'img_badgeColor5', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for badgeColor5');
      await chaiExpect(await browser.checkElement(badgeColor6, testFolder+'img_badgeColor6', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for badgeColor6');
    }
  });

  it('should verify <eui-badge> sizes', async () => {
    browser.addTestMeta({zephyrStep: "437246"});
    let sectionId = 'sizes';
    let sectionElement = await $(page.sectionById(sectionId));
    await expect(sectionElement).toExist('<' + sectionId + '> section -> does not exist on page');
    await sectionElement.scrollIntoView();

    let badgeSize1 = await page.badgeFromSectionWithIdByIndex(sectionId, 1).element();
    let badgeSize2 = await page.badgeFromSectionWithIdByIndex(sectionId, 2).element();
    let badgeSize3 = await page.badgeFromSectionWithIdByIndex(sectionId, 3).element();
    let badgeSize4 = await page.badgeFromSectionWithIdByIndex(sectionId, 4).element();
    let badgeSize5 = await page.badgeFromSectionWithIdByIndex(sectionId, 5).element();

    await expect(badgeSize1).toHaveAttributeContaining('class','size-s');
    await expect(badgeSize2).toHaveAttributeContaining('class','size-m');
    await expect(badgeSize3).toHaveAttributeContaining('class','size-l');
    await expect(badgeSize4).toHaveAttributeContaining('class','size-xl');
    await expect(badgeSize5).toHaveAttributeContaining('class','size-2xl');

    if(browser.config.useWdioImageComparison) {
      await chaiExpect(await browser.checkElement(badgeSize1, testFolder+'img_badgeSize1', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for badgeSize1');
      await chaiExpect(await browser.checkElement(badgeSize2, testFolder+'img_badgeSize2', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for badgeSize2');
      await chaiExpect(await browser.checkElement(badgeSize3, testFolder+'img_badgeSize3', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for badgeSize3');
      await chaiExpect(await browser.checkElement(badgeSize4, testFolder+'img_badgeSize4', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for badgeSize4');
      await chaiExpect(await browser.checkElement(badgeSize5, testFolder+'img_badgeSize5', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for badgeSize5');
    }
  });
});
