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

describe('eUI - <eui-chip> Component Object ', async () => {
  let page = new EuiChipPage();
  let testFolder = './/eui-chip//';
  it('should navigate to <eui-chip> demo page', async () => {
    browser.addTestMeta({uuid:"28b8ade2-d292-11eb-b8bc-0242ac130003", zephyrKey: "CCQA-1121", zephyrStep: "410028", reportGroups: ["eUI.10x.eui"]});
    await page.open(Routing.getEUIComponentUrl('eui-chip'));
    await CookieBannerActions.cookieBanner(true);
    let pgTitle = await $(page.pageTitle);
    await pgTitle.scrollIntoView();
    await expect(pgTitle).toBeDisplayedInViewport({ wait: 5000, message:'<eui-chip> page title is not displayed on page'});
    await expect(await $(page.appDocPageById('eui-chip'))).toExist({wait: 2000, message:'Page Id is not existing on page'});
    await chaiExpect(await pgTitle.getText()).equal('eui-chip', 'Title is not as expected.');
    await expect(await $(page.navigationList)).toBeDisplayedInViewport({wait: 2000, message:'Navigation List -> is not displayed on page'});
  });
  it('should verify the presence and number of component objects <eui-chip> on page ', async () => {
    browser.addTestMeta({zephyrStep: "410029"});
    let sectionId= 'Default';
    let chip = page.chipByIndex(1);
    await (await chip.element()).scrollIntoView();
    await expect(await $(chip.currentPath)).toBeDisplayed({wait: 2000, message:'Chip by index "1" is not displayed on page'});
    await expect(await $(page.chipByTextContains('Item').currentPath)).toBeDisplayed({wait: 2000, message:'Chip by text "Item" is not displayed on page'});
    await expect(await $(page.chipByTextEqualsAndIndex('Item', 1).currentPath)).toBeDisplayed({wait: 2000, message:'Chip by text "Item" and index 1 is not displayed on page'});
    await expect(await $(page.sectionById(sectionId))).toBeDisplayed({wait: 2000, message:'<Default> section -> is not displayed on page'});
  });
  it('should verify the methods container, matChipCO, removeIcon, isChipRemovable ', async () => {
    browser.addTestMeta({zephyrStep: "410030"});
    let sectionId = 'Default';
    let scrollIntoSection = await $(page.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();
    let imageComparisonChip = await (await page.chipFromSectionById('Default').byIndex(1).element());
    if(browser.config.useWdioImageComparison) {
      await imageComparisonChip.scrollIntoView();
      await chaiExpect(await browser.checkElement(imageComparisonChip, testFolder+'img_chipByIndex1', 
        {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for img_chipByIndex1');
    }
    let chip = page.chipFromSectionById(sectionId);
    await expect(await $(page.sectionById(sectionId))).toBeDisplayedInViewport({wait: 2000, message:'<Default> section -> is not displayed on page'});
    await expect(await $(chip.matChipCO.currentPath)).toBeDisplayedInViewport({wait: 2000, message:'Chip matChipCO currentPath is not displayed on page'});
    await expect(await $(chip.container)).toBeDisplayedInViewport({wait: 2000, message:'Chip container is not displayed on page'});

    sectionId = 'isChipRemovable';
    scrollIntoSection = await $(page.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();
    chip = page.chipFromSectionById(sectionId);
    await expect(await $(chip.removeIcon)).toBeDisplayedInViewport({wait: 2000, message:'Chip removeIcon is not displayed on page'});
    await chaiExpect(await chip.isChipRemovable()).equal(true, 'Chip should be removable.');
  });
  it('should verify color states ', async () => {
    browser.addTestMeta({zephyrStep: "413195"});
    let sectionId = 'color-states';
    let scrollIntoSection = await $(page.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();
    await expect(await $(page.sectionById(sectionId))).toBeDisplayedInViewport({wait: 2000, message:'<color-states> section -> is not displayed on page'});
    await expect(await $(page.chipFromSectionWithIdByIndex(sectionId, 1).currentPath)).toHaveAttrContaining('class', 'eui-chip--primary');
    await expect(await $(page.chipFromSectionWithIdByIndex(sectionId, 2).currentPath)).toHaveAttrContaining('class', 'eui-chip--secondary');
    await expect(await $(page.chipFromSectionWithIdByIndex(sectionId, 3).currentPath)).toHaveAttrContaining('class', 'eui-chip--info');
    await expect(await $(page.chipFromSectionWithIdByIndex(sectionId, 4).currentPath)).toHaveAttrContaining('class', 'eui-chip--success');
    await expect(await $(page.chipFromSectionWithIdByIndex(sectionId, 5).currentPath)).toHaveAttrContaining('class', 'eui-chip--warning');
    await expect(await $(page.chipFromSectionWithIdByIndex(sectionId, 6).currentPath)).toHaveAttrContaining('class', 'eui-chip--danger');
    await expect(await $(page.chipFromSectionWithIdByIndex(sectionId, 7).currentPath)).toHaveAttrContaining('class', 'eui-chip--accent');
  });
  it('should verify Event Handlers ', async () => {
    browser.addTestMeta({zephyrStep: "413197"});
    let sectionId = 'event-handlers';
    let scrollIntoSection = await $(page.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();
    await expect(await $(page.sectionById(sectionId))).toBeDisplayedInViewport({wait: 2000, message:'<event-handlers> section -> is not displayed on page'});
    await expect(await $(page.chipFromSectionWithIdByIndex(sectionId, 4).removeIcon)).
      toBeDisplayedInViewport({wait: 2000, message:'Chip removeIcon by index 4 in <event-handlers> section is not displayed on page'});
    await chaiExpect(await page.chipFromSectionWithIdByIndex(sectionId, 4).isChipRemovable()).equal(true, 'Chip should be removable.');
    await (await $(page.chipFromSectionWithIdByIndex(sectionId, 4).removeIcon)).click();
    await expect(await $('//pre')).toHaveTextContaining(' "id": 4');
  });
  it('should verify icon position of a chip', async () => {
    browser.addTestMeta({zephyrStep: "413198"});
    let sectionId = 'icons';
    let scrollIntoSection = await $(page.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();
    await expect(await $(page.sectionById(sectionId))).toBeDisplayedInViewport({wait: 2000, message:'<icons> section -> is not displayed on page'});
    await expect(await $(page.chipFromSectionWithIdByIndex(sectionId, 1).currentPath)).toHaveAttrContaining('class', 'eui-chip--icon-before');
    await expect(await $(page.chipFromSectionWithIdByIndex(sectionId, 8).currentPath)).toHaveAttrContaining('class', 'eui-chip--icon-after');
  });
  it('should verify outline chip', async () => {
    browser.addTestMeta({zephyrStep: "413199"});
    let sectionId = 'outline';
    let scrollIntoSection = await $(page.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();
    let imageComparisonChipPrim = await (await page.chipFromSectionById(sectionId).byIndex(1).element());
    let imageComparisonChipSec = await (await page.chipFromSectionById(sectionId).byIndex(2).element());
    let imageComparisonChipInfo = await (await page.chipFromSectionById(sectionId).byIndex(3).element());
    let imageComparisonChipSucc = await (await page.chipFromSectionById(sectionId).byIndex(4).element());
    let imageComparisonChipWarn = await (await page.chipFromSectionById(sectionId).byIndex(5).element());
    let imageComparisonChipDang = await (await page.chipFromSectionById(sectionId).byIndex(6).element());
    let imageComparisonChipAcce = await (await page.chipFromSectionById(sectionId).byIndex(7).element());
    if(browser.config.useWdioImageComparison) {
      await imageComparisonChipPrim.scrollIntoView();
      await chaiExpect(await browser.checkElement(imageComparisonChipPrim, testFolder+'img_chipByIndex1_Out_Prim', 
      {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for img_chipByIndex1_Out_Prim');
      await chaiExpect(await browser.checkElement(imageComparisonChipSec, testFolder+'img_chipByIndex2_Out_Sec', 
      {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for img_chipByIndex2_Out_Sec');
      await chaiExpect(await browser.checkElement(imageComparisonChipInfo, testFolder+'img_chipByIndex3_Out_Info', 
      {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for img_chipByIndex3_Out_Info');
      await chaiExpect(await browser.checkElement(imageComparisonChipSucc, testFolder+'img_chipByIndex4_Out_Succ', 
      {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for img_chipByIndex4_Out_Succ');
      await chaiExpect(await browser.checkElement(imageComparisonChipWarn, testFolder+'img_chipByIndex5_Out_Warn', 
      {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for img_chipByIndex5_Out_Warn');
      await chaiExpect(await browser.checkElement(imageComparisonChipDang, testFolder+'img_chipByIndex6_Out_Dang', 
      {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for img_chipByIndex6_Out_Dang');
      await chaiExpect(await browser.checkElement(imageComparisonChipAcce, testFolder+'img_chipByIndex7_Out_Acce', 
      {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for img_chipByIndex7_Out_Acce');
    }
    await expect(await $(page.sectionById(sectionId))).
      toBeDisplayedInViewport({wait: 2000, message:'<outline> section -> is not displayed on page'});
    await expect(await $(page.chipFromSectionWithIdByIndex(sectionId, 1).currentPath)).toHaveAttrContaining('class', 'eui-chip--outline');
  });
  it('should verify removable chip', async () => {
    browser.addTestMeta({zephyrStep: "413200"});
    let sectionId = 'isChipRemovable';
    let scrollIntoSection = await $(page.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();
    await expect(await $(page.sectionById(sectionId))).toBeDisplayedInViewport({wait: 2000, message:'<isChipRemovable> section -> is not displayed on page'});
    await chaiExpect(await page.chipFromSectionWithIdByIndex(sectionId, 1).isChipRemovable()).equal(true, 'Chip should be removable.');
    sectionId = 'Default';
    scrollIntoSection = await $(page.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();
    await chaiExpect(await page.chipFromSectionWithIdByIndex(sectionId, 1).isChipRemovable()).equal(false, 'Chip should not be removable.');
  });
  it('should verify euiRounded directive', async () => {
    browser.addTestMeta({zephyrStep: "413201"});
    let sectionId = 'rounded';
    let scrollIntoSection = await $(page.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();
    let imageComparisonChipPrim = await (await page.chipFromSectionById(sectionId).byIndex(1).element());
    let imageComparisonChipSec = await (await page.chipFromSectionById(sectionId).byIndex(2).element());
    let imageComparisonChipInfo = await (await page.chipFromSectionById(sectionId).byIndex(3).element());
    let imageComparisonChipSucc = await (await page.chipFromSectionById(sectionId).byIndex(4).element());
    let imageComparisonChipWarn = await (await page.chipFromSectionById(sectionId).byIndex(5).element());
    let imageComparisonChipDang = await (await page.chipFromSectionById(sectionId).byIndex(6).element());
    let imageComparisonChipAcce = await (await page.chipFromSectionById(sectionId).byIndex(7).element());
    if(browser.config.useWdioImageComparison) {
      await imageComparisonChipPrim.scrollIntoView();
      await chaiExpect(await browser.checkElement(imageComparisonChipPrim, testFolder+'img_chipByIndex1_round_Prim', 
      {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for img_chipByIndex1_round_Prim');
      await chaiExpect(await browser.checkElement(imageComparisonChipSec, testFolder+'img_chipByIndex2_round_Sec', 
      {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for img_chipByIndex2_round_Sec');
      await chaiExpect(await browser.checkElement(imageComparisonChipInfo, testFolder+'img_chipByIndex3_round_Info', 
      {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for img_chipByIndex3_round_Info');
      await chaiExpect(await browser.checkElement(imageComparisonChipSucc, testFolder+'img_chipByIndex4_round_Succ', 
      {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for img_chipByIndex4_round_Succ');
      await chaiExpect(await browser.checkElement(imageComparisonChipWarn, testFolder+'img_chipByIndex5_round_Warn', 
      {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for img_chipByIndex5_round_Warn');
      await chaiExpect(await browser.checkElement(imageComparisonChipDang, testFolder+'img_chipByIndex6_round_Dang', 
      {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for img_chipByIndex6_round_Dang');
      await chaiExpect(await browser.checkElement(imageComparisonChipAcce, testFolder+'img_chipByIndex7_round_Acce', 
      {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for img_chipByIndex7_round_Acce');
    }
    await scrollIntoSection.scrollIntoView();
    await expect(await $(page.sectionById(sectionId))).toBeDisplayedInViewport({wait: 2000, message:'<rounded> section -> is not displayed on page'});
    await expect(await $(page.chipFromSectionWithIdByIndex(sectionId, 1).currentPath)).toHaveAttrContaining('class', 'eui-chip--rounded');
  });
  it('should verify chip sizes', async () => {
    browser.addTestMeta({zephyrStep: "413202"});
    let sectionId = 'sizes';
    let scrollIntoSection = await $(page.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();
    await expect(await $(page.sectionById(sectionId))).toBeDisplayedInViewport({wait: 2000, message:'<sizes> section -> is not displayed on page'});
    await expect(await $(page.chipFromSectionWithIdByIndex(sectionId, 1).currentPath)).toHaveAttrContaining('class', 'eui-chip--size-2xs');
    await expect(await $(page.chipFromSectionWithIdByIndex(sectionId,22).currentPath)).toHaveAttrContaining('class', 'eui-chip--size-xs');
    await expect(await $(page.chipFromSectionWithIdByIndex(sectionId,44).currentPath)).toHaveAttrContaining('class', 'eui-chip--size-s');
    await expect(await $(page.chipFromSectionWithIdByIndex(sectionId,66).currentPath)).toHaveAttrContaining('class', 'eui-chip--size-m');
    await expect(await $(page.chipFromSectionWithIdByIndex(sectionId,88).currentPath)).toHaveAttrContaining('class', 'eui-chip--size-l');
    await expect(await $(page.chipFromSectionWithIdByIndex(sectionId,110).currentPath)).toHaveAttrContaining('class', 'eui-chip--size-xl');
    await expect(await $(page.chipFromSectionWithIdByIndex(sectionId,132).currentPath)).toHaveAttrContaining('class', 'eui-chip--size-2xl');
  });
  it('should verify chip tooltip', async () => {
    browser.addTestMeta({zephyrStep: "413203"});
    let sectionId = 'tooltip';
    let scrollIntoSection = await $(page.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();
    await expect(await $(page.sectionById(sectionId))).toBeDisplayedInViewport({wait: 2000, message:'<tooltip> section -> is not displayed on page'});
    await expect(await $(page.chipFromSectionWithIdByIndex(sectionId, 1).currentPath)).toHaveAttrContaining('class', 'eui-tooltip');
  });
});
