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

describe('eUI - <eui-chip-list> Component Object ', async () => {
  let page = new EuiChipListPage();
  let chipPage = new EuiChipPage();
  let testFolder = './/eui-chip-list//';
  it('should navigate to <eui-chip-list> demo page', async () => {
    browser.addTestMeta({uuid:"dcee92ca-d34d-11eb-b8bc-0242ac130003", zephyrKey: "CCQA-1123", zephyrStep: "410984", reportGroups: ["eUI.10x.eui"]});
    await page.open(Routing.getEUIComponentUrl('eui-chip-list'));
    await CookieBannerActions.cookieBanner(true);
    let pgTitle = await $(page.pageTitle);
    await pgTitle.scrollIntoView();
    await expect(pgTitle).toBeDisplayedInViewport({wait: 2000, message:'<eui-chip-list> page title is not displayed on page'});
    await expect(await $(page.appDocPageById('eui-chip-list'))).toExist({wait: 2000, message:
       'Page Id is not existing on page'});
    await chaiExpect(await pgTitle.getText()).equal('eui-chip-list', 'Page 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-list> on page ', async () => {
    browser.addTestMeta({zephyrStep: "410985"});
    let sectionId = 'Default';
    let scrollIntoSection = await $(page.sectionById(sectionId));
    let chipList = page.chipListByIndex(1);
    await expect(await $(chipList.currentPath)).
      toBeDisplayedInViewport({wait: 2000, message:'Chip-list by index "1" is not displayed on page'});
    await expect(await $(page.chipListByTextContains('Item').currentPath)).
      toBeDisplayedInViewport({wait: 2000, message:'Chip-list by text "Item" is not displayed on page'});
    await expect(await $(page.chipListByTextEqualsAndIndex('Item', 1).currentPath)).
      toBeDisplayedInViewport({wait: 2000, message:'Chip-list by text "Item" and index 1 is not displayed on page'});
    await scrollIntoSection.scrollIntoView();
    await expect(await $(page.sectionById(sectionId))).
      toBeDisplayedInViewport({wait: 2000, message:'<Default> section -> is not displayed on page'});
    await chaiExpect(await chipList.defaultComponentsCount()).equal(23,
      'There should be 23 <eui-chip-list> components on the page.');
  });
  it('should verify the methods container, wrapper, matChipListCO, euiChipListChipCO ', async () => {
    browser.addTestMeta({zephyrStep: "410986"});
    let sectionId = 'Default';
    let scrollIntoSection = await $(page.sectionById(sectionId));
    let imageComparisonChipList = await (await page.chipListFromSectionById(sectionId).byIndex(1).element());
    if(browser.config.useWdioImageComparison) {
      await imageComparisonChipList.scrollIntoView();
      await chaiExpect(await browser.checkElement(imageComparisonChipList, testFolder+'img_chipListByIndex1',
      {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for img_chipListByIndex1');
    }
    await scrollIntoSection.scrollIntoView();
    let chipList = page.chipListFromSectionById(sectionId);
    await expect(await $(page.sectionById(sectionId))).
      toBeDisplayedInViewport({wait: 2000, message:'<Default> section -> is not displayed on page'});
    await expect(await $(chipList.container)).
      toBeDisplayedInViewport({wait: 2000, message:'Chip-list container is not displayed on page'});
    await expect(await $(chipList.wrapper)).
      toBeDisplayedInViewport({wait: 2000, message:'Chip-list wrapper is not displayed on page'});
    await expect(await $(chipList.matChipListCO.currentPath)).
      toBeDisplayedInViewport({wait: 2000, message:'Chip-list matChipListCO currentPath is not displayed on page'});
    await expect(await $(chipList.euiChipListChipCO.currentPath)).
      toBeDisplayedInViewport({wait: 2000, message:'Chip-list euiChipListChipCO currentPath is not displayed on page'});
  });
  it('should verify the methods expandButtonwrapper, hasExpandButton, buttonCO, angelRightIcon, AngelLeftIcon, toggleLinkMoreLabel, toggleLinkLessLabel ', async () => {
    browser.addTestMeta({zephyrStep: "410987"});
    let sectionId = 'maxVisibleTags';
    let scrollIntoSection = await $(page.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();
    let chipList = page.chipListFromSectionWithIdByIndex(sectionId,1);
    await expect(await $(chipList.expandButtonwrapper)).
      toBeDisplayedInViewport({wait: 2000, message:'Chip-list expandButtonwrapper is not displayed on page'});
    await chaiExpect(await chipList.hasExpandButton()).equal(true, 'ChipList should have expand button.');
    await expect(await $(chipList.expandButton)).
      toBeDisplayedInViewport({wait: 2000, message:'Chip-list expandButton is not displayed on page'});
    await expect(await $(chipList.angelRightIcon)).
      toBeDisplayedInViewport({wait: 2000, message:'Chip-list angelRightIcon is not displayed on page'});
    await chaiExpect(await chipList.hasMoreLabel()).equal(true, 'ChipList should have label.');
    chipList = page.chipListFromSectionWithIdByIndex(sectionId,2);
    await expect(await $(chipList.angelLeftIcon)).
      toBeDisplayedInViewport({wait: 2000, message:'Chip-list angelLeftIcon is not displayed on page'});
    await chaiExpect(await chipList.isMaxVisibleChipsOpened()).equal(true, 'ChipList should have max visible chips opened.');
    await chaiExpect(await chipList.hasLessLabel()).equal(true, 'ChipList should have label.');
    chipList = page.chipListFromSectionWithIdByIndex(sectionId,3);
    await expect(await $(chipList.euiLabel)).
      toBeDisplayedInViewport({wait: 2000, message:'Chip-list euiLabel is not displayed on page'});
  });
  it('should verify euiChipListChipCO methods title, hasChipsLabelTruncateCount, euiChipCO, euiIconCO', async () => {
    browser.addTestMeta({zephyrStep: ""});
    let sectionId = 'truncateTagsLabel';
    let scrollIntoSection = await $(page.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();
    let chipList = page.chipListFromSectionWithIdByIndex(sectionId,1);
    await expect(await $(chipList.euiChipListChipCO.title)).
      toBeDisplayedInViewport({wait: 2000, message:'Chip-list euiChipListChipCO method title is not displayed on page'});
    await chaiExpect(await chipList.euiChipListChipCO.hasChipsLabelTruncateCount()).equal(true, 'ChipList should have ChipsLabelTruncateCount.');
    await expect(await $(chipList.euiChipListChipCO.euiChipCO.currentPath)).
      toBeDisplayedInViewport({wait: 2000, message:'Chip-list euiChipListChipCO euiChipCO currentPath is not displayed on page'});
  });

  it('should verify icon class', async () => {
    browser.addTestMeta({zephyrStep: ""});
    let sectionId = 'iconClass';
    let scrollIntoSection = await $(page.sectionById(sectionId));
    let imageComparisonChipListIconClass_1 = await (await page.chipListFromSectionById(sectionId).byIndex(1).element());
    let imageComparisonChipListIconClass_2 = await (await page.chipListFromSectionById(sectionId).byIndex(2).element());
    if(browser.config.useWdioImageComparison) {
      await imageComparisonChipListIconClass_1.scrollIntoView();
      await chaiExpect(await browser.checkElement(imageComparisonChipListIconClass_1, testFolder+'img_chipList_iconClass_ByIndex1',
      {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for img_chipList_iconClass_ByIndex1');
      await chaiExpect(await browser.checkElement(imageComparisonChipListIconClass_2, testFolder+'img_chipList_iconClass_ByIndex2'
      ,
      {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for img_chipList_iconClass_ByIndex2');
    }
    await scrollIntoSection.scrollIntoView();
    await expect(await $(page.sectionById(sectionId))).
      toBeDisplayedInViewport({wait: 2000, message:'<iconClass> section -> is not displayed on page'});
    await expect(await $(page.chipListFromSectionWithIdByIndex(sectionId, 1).euiChipListChipCO.euiIconCO.currentPath)).
      toBeDisplayedInViewport({wait: 2000, message:'Chip-list euiChipListChipCO.euiChipCO.currentPath is not displayed on page'});
    await expect(await $(page.chipListFromSectionWithIdByIndex(sectionId, 2).euiChipListChipCO.euiIconCO.currentPath)).
      toHaveAttrContaining('iconclass', 'flag-icon');
    await expect(await $(page.chipListFromSectionWithIdByIndex(sectionId, 3).euiChipListChipCO.euiIconCO.currentPath)).
      toHaveAttrContaining('class', 'flag-icon--rounded');
  });

  it('should verify Badge Sizes', async () => {
    browser.addTestMeta({zephyrStep: ""});
    let sectionId = 'BadgeSizes';
    let scrollIntoSection = await $(page.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();
    await expect(await $(page.sectionById(sectionId))).
      toBeDisplayedInViewport({wait: 2000, message:'<BadgeSizes> section -> is not displayed on page'});
    await expect(await $(page.chipListFromSectionWithIdByIndex(sectionId, 1).currentPath)).toHaveAttrContaining('class', 'eui-chip-list--size-s');
    await expect(await $(page.chipListFromSectionWithIdByIndex(sectionId,2).currentPath)).toHaveAttrContaining('class', 'eui-chip-list--size-m');
    await expect(await $(page.chipListFromSectionWithIdByIndex(sectionId,3).currentPath)).toHaveAttrContaining('class', 'eui-chip-list--size-l');
  });
  it('should verify isDeletable ', async () => {
    browser.addTestMeta({zephyrStep: ""});
    let sectionId = 'isDeletable';
    let scrollIntoSection = await $(page.sectionById(sectionId));
    let imageComparisonChipListIsDeletable = await (await page.chipListFromSectionById(sectionId).byIndex(1).element());
    if(browser.config.useWdioImageComparison) {
      await imageComparisonChipListIsDeletable.scrollIntoView();
      await chaiExpect(await browser.checkElement(imageComparisonChipListIsDeletable, testFolder+'img_chipList_isDeletable_ByIndex1',
      {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for img_chipList_isDeletable_ByIndex1');
    }
    await scrollIntoSection.scrollIntoView();
    await expect(await $(page.sectionById(sectionId))).
      toBeDisplayedInViewport({wait: 2000, message:'<isDeletable> section -> is not displayed on page'});
    await expect(await $(page.chipListByTextContains('Item accent').currentPath)).
      toBeDisplayedInViewport({wait: 2000, message:'Chip-list by text "Item accent" is not displayed on page'});
    await chaiExpect(await page.chipListFromSectionWithIdByIndex(sectionId, 1).euiChipListChipCO.euiChipCO.isChipRemovable()).equal(true, 'ChipList should be removable.');
    await (await $(page.chipListFromSectionWithIdByIndex(sectionId, 1).euiChipListChipCO.euiChipCO.removeIcon)).click();
    await expect(await $(page.chipListByTextContains('Item accent').currentPath)).not.
      toBeDisplayedInViewport({wait: 2000, message:'Chip-list by text "Item accent" is displayed on page'});
    await expect(await $(page.chipListByTextContains('Item primary').currentPath)).
      toBeDisplayedInViewport({wait: 2000, message:'Chip-list by text "Item primary" is not displayed on page'});
  });
  it('should verify isRounded', async () => {
    browser.addTestMeta({zephyrStep: ""});
    let sectionId = 'isRounded';
    let scrollIntoSection = await $(page.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();
    await expect(await $(page.sectionById(sectionId))).
      toBeDisplayedInViewport({wait: 2000, message:'<isRounded> section -> is not displayed on page'});
    await expect(await $(page.chipListFromSectionWithIdByIndex(sectionId, 1).currentPath)).toHaveAttrContaining('class', 'eui-chip-list--rounded');
  });
  it('should verify Events', async () => {
    browser.addTestMeta({zephyrStep: ""});
    let sectionId = 'events';
    let scrollIntoSection = await $(page.sectionById(sectionId));
    let imageComparisonChipListEvents = await (await page.chipListFromSectionById(sectionId).byIndex(1).element());
    if(browser.config.useWdioImageComparison) {
      await imageComparisonChipListEvents.scrollIntoView();
      await chaiExpect(await browser.checkElement(imageComparisonChipListEvents, testFolder+'img_chipList_Events_ByIndex1',
      {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for img_chipList_Events_ByIndex1');
    }
    await scrollIntoSection.scrollIntoView();
    await expect(await $(page.sectionById(sectionId))).toBeDisplayedInViewport({wait: 2000, message:'<events> section -> is not displayed on page'});
    await chaiExpect(await chipPage.chipFromSectionById(sectionId).defaultComponentsCount()).equal(7,
        'There should be 7 <eui-chip> components on the page.');
    await (await $(page.buttonComponentByTextContains('Add chip').currentPath)).click();
    await chaiExpect(await chipPage.chipFromSectionById(sectionId).defaultComponentsCount()).equal(8,
      'There should be 8 <eui-chip> components on the page.');
  });
  it('should verify Max visible tags', async () => {
    browser.addTestMeta({zephyrStep: ""});
    let sectionId = 'maxVisibleTags';
    let scrollIntoSection = await $(page.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();
    await expect(await $(page.sectionById(sectionId))).toBeDisplayedInViewport({wait: 2000, message:'<maxVisibleTags> section -> is not displayed on page'});
    await chaiExpect((await $$(page.chipListFromSectionWithIdByIndex(sectionId,1).euiChipListChipCO.euiChipCO.currentPath)).length).equal(2,'There should be 2 chips in chip list.');
    await chaiExpect(await page.chipListFromSectionWithIdByIndex(sectionId,1).isMaxVisibleChipsOpened()).equal(false, 'Chiplist should not have MaxVisibleChipsOpened.');
    await chaiExpect(await page.chipListFromSectionWithIdByIndex(sectionId,1).hasMoreLabel()).equal(true, 'Chiplist should have label.');
    await (await $(page.chipListFromSectionWithIdByIndex(sectionId,1).angelRightIcon)).click();
    await chaiExpect((await $$(page.chipListFromSectionWithIdByIndex(sectionId,1).euiChipListChipCO.euiChipCO.currentPath)).length).equal(7,
      'There should be 7 chips in chip list.');

    await chaiExpect((await $$(page.chipListFromSectionWithIdByIndex(sectionId,2).euiChipListChipCO.euiChipCO.currentPath)).length).equal(7,
        'There should be 7 chips in chip list.');
    await chaiExpect(await page.chipListFromSectionWithIdByIndex(sectionId,2).isMaxVisibleChipsOpened()).equal(true, 'Chiplist should have MaxVisibleChipsOpened.');
    await chaiExpect(await page.chipListFromSectionWithIdByIndex(sectionId,2).hasMoreLabel()).equal(false, 'Chiplist should not have label.');
    await (await $(page.chipListFromSectionWithIdByIndex(sectionId,2).angelLeftIcon)).click();
    await chaiExpect((await $$(page.chipListFromSectionWithIdByIndex(sectionId,2).euiChipListChipCO.euiChipCO.currentPath)).length).equal(2,'There should be 2 chips in chip list.');
    await expect(await $(page.chipListFromSectionWithIdByIndex(sectionId,3).euiLabel)).
      toBeDisplayedInViewport({wait: 2000, message:'Chip-list euiLabel is not displayed on page'});
    await expect(await $(page.chipListByTextContains('More').euiLabel)).toBeDisplayedInViewport({wait: 2000, message:'Chip-list euiLabel More is not displayed on page'});
  });
  it('should verify outline chip-list', async () => {
    browser.addTestMeta({zephyrStep: ""});
    let sectionId = 'typeClass-outline';
    let scrollIntoSection = await $(page.sectionById(sectionId));
    let imageComparisonChipListOutline = await (await page.chipListFromSectionById(sectionId).byIndex(1).element());
    if(browser.config.useWdioImageComparison) {
      await imageComparisonChipListOutline.scrollIntoView();
      await chaiExpect(await browser.checkElement(imageComparisonChipListOutline, testFolder+'img_chipList_Outline_ByIndex1',
      {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for img_chipList_Outline_ByIndex1');
    }
    await scrollIntoSection.scrollIntoView();
    await expect(await $(page.sectionById(sectionId))).toBeDisplayedInViewport({wait: 2000, message:'<typeClass-outline> section -> is not displayed on page'});
    await expect(await $(page.chipListFromSectionWithIdByIndex(sectionId, 1).currentPath)).toHaveAttrContaining('class', 'eui-chip-list--outline');
  });
  it('should verify sorting of chip-list', async () => {
    browser.addTestMeta({zephyrStep: ""});
    let sectionId = 'sorting';
    let scrollIntoSection = await $(page.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();
    await expect(await $(page.sectionById(sectionId))).toBeDisplayedInViewport({wait: 2000, message:'<sorting> section -> is not displayed on page'});
    await expect(await $(page.chipListFromSectionWithIdByIndex(sectionId, 1).currentPath)).toHaveAttrContaining('chipssortorder', 'ASC');
    await expect(await $(chipPage.chipFromSectionWithIdByIndex(sectionId, 1).currentPath)).toHaveText('Item A');
    await expect(await $(page.chipListFromSectionWithIdByIndex(sectionId, 2).currentPath)).toHaveAttrContaining('chipssortorder', 'DESC');
    await expect(await $(chipPage.chipFromSectionWithIdByIndex(sectionId, 9).currentPath)).toHaveText('Item H');
  });
  it('should verify truncated labels of chip-list', async () => {
    browser.addTestMeta({zephyrStep: ""});
    let sectionId = 'truncateTagsLabel';
    let scrollIntoSection = await $(page.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();
    await expect(await $(page.sectionById(sectionId))).toBeDisplayedInViewport({wait: 2000, message:'<truncateTagsLabel> section -> is not displayed on page'});
    await expect(await $(page.chipListFromSectionWithIdByIndex(sectionId, 1).euiChipListChipCO.euiChipCO.currentPath)).toHaveText('Ite…');
  });
  it('should verify ischipsdraganddrop directive for chip-list', async () => {
    browser.addTestMeta({zephyrStep: ""});
    let sectionId = 'drag-n-drop';
    let scrollIntoSection = await $(page.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();
    await expect(await $(page.sectionById(sectionId))). toBeDisplayedInViewport({wait: 2000, message:'<drag-n-drop> section -> is not displayed on page'});
    await expect(await $(page.chipListFromSectionWithIdByIndex(sectionId, 1).currentPath)).toHaveAttr('ischipsdraganddrop', '');
  });
});
