import Routing from '../../../pages/eui/14x/routing.js'
import * as CookieBannerActions from '../../../actions/cookieBanner.js'
import EuiListPage from '../../../pages/eui/14x/eui-list.po.js';
import BaseActions from '../../../actions/V14/base-actions.js';

describe('eUI - <eui-list> Component Object ', async () => {
  let listPage = new EuiListPage();
  let testFolder = './/v14x//eui-list//'
  let pageName = 'eui-list'
  it('should navigate to <eui-list> demo page', async () => {
    browser.addTestMeta({uuid:"2b944ce0-05d3-4f70-8484-632c00581205", zephyrKey: "CCQA-1285", zephyrStep: "413519", reportGroups: ["eUI.14x.eui"]});
    await listPage.open(Routing.getEUIComponentUrl('eui-list'));
    await CookieBannerActions.cookieBanner(true);
    await BaseActions.verifyPageTitle(pageName);
    await expect(await $(listPage.navigationList)).toBeDisplayedInViewport({message:'Navigation List -> is not displayed on page'});
  });
  it('should verify the section titles and total number of CO on page', async () => {
    browser.addTestMeta({zephyrStep: "413520"});
    let sectionId = 'default';
    await BaseActions.verifySection(sectionId, pageName);
    sectionId = 'with-icons';
    await BaseActions.verifySection(sectionId, pageName);
    sectionId = 'typeclass';
    await BaseActions.verifySection(sectionId, pageName);
    sectionId = 'navigation-list';
    await BaseActions.verifySection(sectionId, pageName);
    sectionId = 'dropdown';
    await BaseActions.verifySection(sectionId, pageName);
    sectionId = 'nested-list';
    await BaseActions.verifySection(sectionId, pageName);
    sectionId = 'isCollapsible';
    await BaseActions.verifySection(sectionId, pageName);
  });
  it('should verify the <eui-list> <eui-list-item> methods', async () => {
    browser.addTestMeta({zephyrStep: "413521"});
    let sectionId = 'default';
    section = await $(listPage.sectionById(sectionId));
    await section.scrollIntoView();
    let co = listPage.listFromSectionWithIdByIndex(sectionId, 1);

    await expect(await $(co.currentPath)).toBeDisplayed({wait: 3000, message:'<eui-list> CO -> is not displayed on page'});
    let listItemByText = await $(co.euiListItemCO.byTextContains('Label 1').currentPath);
    await expect(listItemByText).toBeDisplayed({wait: 3000, message:
      '<eui-list> CO by text <Label 1>  -> is not displayed on page'});
    let listItemByIndex = await $(co.euiListItemCO.byIndex(2).currentPath);
    await expect(listItemByIndex).toBeDisplayed({wait: 3000, message:'<eui-list> CO by index 2 -> is not displayed on page'});
    await expect(await $(co.euiListItemCO.byIndex(3).currentPath)).toHaveText('Label 3', {wait: 1000, message:
      '<eui-list> CO by index 3 -> doesn\'t have the expected text'});

    if(browser.config.useWdioImageComparison) {
      await chaiExpect(await browser.checkElement(listItemByText, testFolder+'img_listItemByText', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for listItemByText');
      await chaiExpect(await browser.checkElement(listItemByIndex, testFolder+'img_listItemByIndex', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for listItemByIndex');
    }

    //verify the list item itemContentText
    co = listPage.listFromSectionWithIdByIndex(sectionId, 2);
    let itemContentText = await $(co.euiListItemCO.byIndex(1).itemContentText);
    await expect(itemContentText).toBeDisplayed({wait: 3000, message:
      'itemContentText -> is not displayed on page'});
    await expect(itemContentText).toHaveText('Label\nSub-label', {wait: 3000, message:
      'itemContentText -> doesn\'t have  the expected text'});
    if(browser.config.useWdioImageComparison) {
      await chaiExpect(await browser.checkElement(itemContentText, testFolder+'img_itemContentText', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for itemContentText');
    }

    //verify the list item itemIcon
    co = listPage.listFromSectionWithIdByIndex('with-icons', 1);
    let itemIcon = await $(co.euiListItemCO.byIndex(1).itemIcon);
    await expect(itemIcon).toBeDisplayed({wait: 3000, message:
      'itemIcon is not displayed on page'});
    if(browser.config.useWdioImageComparison) {
      await chaiExpect(await browser.checkElement(itemIcon, testFolder+'img_itemIcon', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for itemIcon');
    }
  });
  it('should verify the <eui-list> <eui-list-item> severity method', async () => {
    browser.addTestMeta({zephyrStep: "413522"});
    let sectionId = 'typeclass';
    let section = await $(listPage.sectionById(sectionId));
    await section.scrollIntoView();
    let co = listPage.listFromSectionWithIdByIndex('typeclass', 1);
    let severityPrimary = co.euiListItemCO.byIndex(1);
    let severitySecondary = co.euiListItemCO.byIndex(2);
    let severityInfo = co.euiListItemCO.byIndex(3);
    let severitySuccess = co.euiListItemCO.byIndex(4);
    let severityWarning = co.euiListItemCO.byIndex(5);
    let severityDanger = co.euiListItemCO.byIndex(6);
    await expect(await severityPrimary.itemSeverity()).toBe('primary');
    await chaiExpect(await severityPrimary.itemSeverity()).equal('primary', 'severityPrimary is not equal primary');
    await chaiExpect(await severitySecondary.itemSeverity()).equal('secondary', 'severitySecondary is not equal secondary');
    await chaiExpect(await severityInfo.itemSeverity()).equal('info', 'severityInfo is not equal info');
    await chaiExpect(await severitySuccess.itemSeverity()).equal('success', 'severitySuccess is not equal success');
    await chaiExpect(await severityWarning.itemSeverity()).equal('warning', 'severityWarning is not equal warning');
    await chaiExpect(await severityDanger.itemSeverity()).equal('danger', 'severityDanger is not equal danger');
    if(browser.config.useWdioImageComparison) {
      await chaiExpect(await browser.checkElement(await (await severityPrimary.element()), testFolder+'img_severityPrimary', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for severityPrimary');
      await chaiExpect(await browser.checkElement(await (await severitySecondary.element()), testFolder+'img_severitySecondary', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for severitySecondary');
      await chaiExpect(await browser.checkElement(await (await severityInfo.element()), testFolder+'img_severityInfo', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for severityInfo');
      await chaiExpect(await browser.checkElement(await (await severitySuccess.element()), testFolder+'img_severitySuccess', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for severitySuccess');
      await chaiExpect(await browser.checkElement(await (await severityWarning.element()), testFolder+'img_severityWarning', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for severityWarning');
      await chaiExpect(await browser.checkElement(await (await severityDanger.element()), testFolder+'img_severityDanger', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for severityDanger');
    }
  });
  it('should verify the <eui-list> <eui-list-item> nested list', async () => {
    browser.addTestMeta({zephyrStep: "413523"});
    let sectionId = 'nested-list';
    let section = await $(listPage.sectionById(sectionId));
    await section.scrollIntoView();
    let co = listPage.listFromSectionWithIdByIndex(sectionId, 1);

    await expect(await $(co.byIndex(1).currentPath)).toBeDisplayed({wait: 3000, message:'<eui-list> by index 1 -> is not displayed on page'});
    await expect(await $(co.byIndex(2).currentPath)).toBeDisplayed({wait: 3000, message:'<eui-list> by index 2 -> is not displayed on page'});

    await chaiExpect(await co.byIndex(1).euiListItemCO.defaultComponentsCount()).equal(4, 'There should be 4 list item by index 1');
    await chaiExpect(await co.byIndex(2).euiListItemCO.defaultComponentsCount()).equal(2, 'There should be 2 list item by index 2');

    let nestedList1 = await $(co.byIndex(1).euiListItemCO.byIndex(1).itemLabel);
    await expect(nestedList1).toBeDisplayed({wait: 3000, message:'nestedList1 is not displayed on page'});
    await expect(nestedList1).toHaveText('Menu item 1', {wait: 1000, message:
      '<eui-list> byIndex 1- <eui-list-item> byIndex 1-> Item Text is not as expected'});
    let nestedList2 = await $(co.byIndex(2).euiListItemCO.byIndex(2).itemLabel);
    await expect(nestedList2).toBeDisplayed({wait: 3000, message:'nestedList2 is not displayed on page'});
    await expect(nestedList2).toHaveText('Menu item 1.2', {wait: 1000, message:
      '<eui-list> byIndex 2- <eui-list-item> byIndex 2-> Item Text is not as expected'});
    if(browser.config.useWdioImageComparison) {
      await chaiExpect(await browser.checkElement(nestedList1, testFolder+'img_nestedList1', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for nestedList1');
      await chaiExpect(await browser.checkElement(nestedList2, testFolder+'img_nestedList2', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for nestedList2');
    }
  });
  it('should verify <eui-list> <eui-list-item> isCollapsible and hasSubmenu methods', async () => {
    browser.addTestMeta({zephyrStep: "413658"});
    let sectionId = 'isCollapsible';
    let section = await $(listPage.sectionById(sectionId));
    await section.scrollIntoView();
    let co = listPage.listFromSectionWithIdByIndex(sectionId, 1);

    await chaiExpect(await co.euiListItemCO.byIndex(1).isCollapsible()).equal(true, 'Dropdown -> eui-list-item -> Item 1 should be collapsible');
    await chaiExpect(await co.euiListItemCO.byIndex(2).isCollapsible()).equal(false, 'Dropdown -> eui-list-item -> Item 2 should NOT be collapsible');
    await chaiExpect(await co.euiListItemCO.byIndex(1).hasSubmenu()).equal(true, 'Dropdown -> eui-list-item -> Item 1 should have subMenu');
    await chaiExpect(await co.euiListItemCO.byIndex(2).hasSubmenu()).equal(false, 'Dropdown -> eui-list-item -> Item 2 should NOT have subMenu');
    let itemToggle = await $(co.euiListItemCO.byIndex(1).itemToggleCO.currentPath);
    await expect(itemToggle).toBeDisplayed({wait: 1000, message:
      'Dropdown -> eui-list-item -> Item 1 should have expand toggle'});
    if(browser.config.useWdioImageComparison) {
      await chaiExpect(await browser.checkElement(itemToggle, testFolder+'img_itemToggle', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for itemToggle');
    }
  });
  it('should expand submenus and verify the present options', async () => {
    browser.addTestMeta({zephyrStep: "413659"});
    let sectionId = 'isCollapsible';
    let section = await $(listPage.sectionById(sectionId));
    await section.scrollIntoView();
    let co = listPage.listFromSectionWithIdByIndex('isCollapsible', 1);
    let tg = await $(co.euiListItemCO.byIndex(1).itemToggleCO.currentPath);
    await chaiExpect(await co.defaultComponentsCount()).equal(1, 'There should be 1 list');
    await chaiExpect(await co.euiListItemCO.defaultComponentsCount()).equal(2, 'There should be 2 list items');
    await expect(await $(co.euiListItemCO.byIndex(1).itemLabel)).toHaveText('Menu item 1', {wait: 1000, message:
      '<eui-list> byIndex 2- <eui-list-item> byIndex 1-> Item Label is not as expected'});
    await tg.click();
    await chaiExpect(await co.defaultComponentsCount()).equal(2, 'There should be 2 lists');
    await chaiExpect(await co.euiListItemCO.defaultComponentsCount()).equal(4, 'There should be 4 list items');
    let listItemByIndex1 = co.byIndex(2).euiListItemCO.byIndex(1);
    await expect(await $(listItemByIndex1.currentPath)).toBeDisplayed({wait: 3000, message:
      '<eui-list> byIndex 2- <eui-list-item> byIndex 1-> is not displayed on page'});
    await expect(await $(listItemByIndex1.itemLabel)).toHaveText('Menu item 1.1', {wait: 1000, message:
      '<eui-list> byIndex 2- <eui-list-item> byIndex 1-> Item Label is not as expected'});
    let listItemByIndex2 = co.byIndex(2).euiListItemCO.byIndex(2);
    await expect(await $(listItemByIndex2.currentPath)).toBeDisplayed({wait: 3000, message:
      '<eui-list> byIndex 2- <eui-list-item> byIndex 2-> is not displayed on page'});
    await expect(await $(listItemByIndex2.itemLabel)).toHaveText('Menu item 1.2', {wait: 1000, message:
      '<eui-list> byIndex 2- <eui-list-item> byIndex 2-> Item Label is not as expected'});

    if(browser.config.useWdioImageComparison) {
      await (await $(listItemByIndex1.currentPath)).scrollIntoView();
      await chaiExpect(await browser.checkElement(await $(listItemByIndex1.currentPath), testFolder+'img_listItemByIndex1', {hideElements: [await $('//eui-app-toolbar')]})).within(0,3, 'Image comparison failed for listItemByIndex1');
      await (await $(listItemByIndex2.currentPath)).scrollIntoView();
      await chaiExpect(await browser.checkElement(await $(listItemByIndex2.currentPath), testFolder+'img_listItemByIndex2', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for listItemByIndex2');
    }

     await chaiExpect(await listItemByIndex1.hasSubmenu()).equal(true, 'listItemByIndex1 hasSubmenu should be true');
     await chaiExpect(await listItemByIndex2.hasSubmenu()).equal(false, 'listItemByIndex2 hasSubmenu should be false');

     await chaiExpect(await co.byIndex(1).euiListItemCO.byIndex(1).isCollapsed()).equal(false, 'co.byIndex(1).euiListItemCO.byIndex(1) isCollapsed should be false');
     await chaiExpect(await listItemByIndex1.isCollapsed()).equal(true, 'listItemByIndex1 isCollapsed should be true');
  });
  it('should verify the item SubList', async () => {
    browser.addTestMeta({zephyrStep: "413660"});
    let sectionId = 'isCollapsible';
    let sectionId2 = 'nested-list';
    let section = await $(listPage.sectionById(sectionId));
    await section.scrollIntoView();
    let co = listPage.listFromSectionWithIdByIndex(sectionId, 1);
    let co2 = listPage.listFromSectionWithIdByIndex(sectionId2, 1);


    let itemSubList1 = await $(co.byIndex(1).euiListItemCO.byIndex(1).itemSubList);
    await expect(itemSubList1).toBeDisplayed({wait: 3000, message:
        '<eui-list> byIndex 1 from section isCollapsible - <eui-list-item> byIndex 1-> Item SubList -> is not displayed on page'});

    let itemSubList2 = await $(co2.byIndex(1).euiListItemCO.byIndex(1).itemSubList);
    await expect(itemSubList2).toBeDisplayed({wait: 3000, message:
      '<eui-list> byIndex 1 from section nested-list - <eui-list-item> byIndex 1-> Item SubList -> is not displayed on page'});

    if(browser.config.useWdioImageComparison) {
      await chaiExpect(await browser.checkElement(itemSubList1, testFolder+'img_itemSubList1', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for itemSubList1');
      await chaiExpect(await browser.checkElement(itemSubList2, testFolder+'img_itemSubList2', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for itemSubList2');
    }
  });
});
