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

describe('eUI - <eui-dropdown> Component Object ',async () => {
  let page = new EuiDropdownPage();
  let testFolder = './/eui-dropdown//';
  it('should navigate to <eui-dropdown> demo page',async () => {
    browser.addTestMeta({uuid:"905356e9-7fb6-4608-af10-45fa7ed8f281", zephyrKey: "CCQA-1409", zephyrStep: "414395", reportGroups: ["eUI.10x.eui"]});
    await page.open(Routing.getEUIComponentUrl('eui-dropdown'));
    await CookieBannerActions.cookieBanner(true);
    let pgTitle = await $(page.pageTitle);
    await pgTitle.scrollIntoView();
    await expect(await $(pgTitle)).toBeDisplayedInViewport({message:'<eui-dropdown> page title is not displayed on page'});
    await expect(await $(page.appDocPageById('eui-dropdown'))).toExist({message:'Page Id is not existing on page'});
    await chaiExpect(await pgTitle.getText()).equal('eui-dropdown', '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 <eui-dropdown> componenets on page',async () => {
    browser.addTestMeta({zephyrStep: "414396"});

    let sectionId = 'Default';
    let scrollIntoSection = await $(page.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();
    let index = 1;
    let dropdownByIndex = await (await page.dropdownByIndex(index).element());
    await expect(await $(page.sectionById(sectionId))).toBeDisplayedInViewport({message:''+sectionId+' section -> is not displayed on page'});
    await expect(dropdownByIndex).toBeDisplayed({message:'dropdown by index '+ index +' is not displayed on page'});
    if(browser.config.useWdioImageComparison) {
      await chaiExpect(await browser.checkElement(dropdownByIndex, testFolder+'img_dropdownByIndex', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for dropdownByIndex');
    }
    await chaiExpect(await page.dropdownByIndex(index).defaultComponentsCount()).equal(10, 'There should be 7 <eui-dropdown> components on the page.');
  });

  it('should verify the Hamburger menu',async () => {
    browser.addTestMeta({zephyrStep: "414397"});
    let index = 3;
    let dropdown = page.dropdownByIndex(index);
    let btnCo = await (await dropdown.euiButtonCO.element());
    await btnCo.scrollIntoView();
    await expect(btnCo).toBeDisplayedInViewport({message:'Dropdown button -> is not displayed on page'});
    await btnCo.click();

    let dropdownContent1 = await $(dropdown.euiDropdownContent.currentPath);
    await expect(dropdownContent1).toBeDisplayed({message:'<Default> mat dropdown content -> is not displayed on page'});

    let menuItem1 = await (await dropdown.matDropdownItemByLabel('Menu item 1').element());
    await expect(menuItem1).toBeDisplayed('Menu Item with text "Menu item 1" is not displayed.');
    let menuItem2 = await (await dropdown.matDropdownItemByLabel('Menu item 2').element());
    await expect(menuItem2).toBeDisplayed('Menu Item with text "Menu item 2" is not displayed.');
    let menuItem3 = await (await dropdown.matDropdownItemByLabel('Menu item 3').element());
    await expect(menuItem3).toBeDisplayed('Menu Item with text "Menu item 3" is not displayed.');
    if(browser.config.useWdioImageComparison) {
      await chaiExpect(await browser.checkElement(dropdownContent1, testFolder+'img_dropdownContent1', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for dropdownContent1');
      await chaiExpect(await browser.checkElement(menuItem1, testFolder+'img_menuItem1', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for menuItem1');
      await chaiExpect(await browser.checkElement(menuItem2, testFolder+'img_menuItem2', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for menuItem2');
      await chaiExpect(await browser.checkElement(menuItem3, testFolder+'img_menuItem3', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for menuItem3');
    }
    await menuItem1.click();
  });

  it('should verify the Options menu',async () => {
    browser.addTestMeta({zephyrStep: "414398"});
    let index = 4;
    let dropdown = page.dropdownByIndex(index);
    let btnCo = await (await dropdown.euiButtonCO.element());
    await btnCo.scrollIntoView();
    await expect(btnCo).toBeDisplayedInViewport({message:'Dropdown button -> is not displayed on page'});
    await btnCo.click();

    let dropdownContent2 = await $(dropdown.euiDropdownContent.currentPath);
   await expect(dropdownContent2).toBeDisplayed({message:'<Options> mat dropdown content -> is not displayed on page'});

    let optionItem1 = await (await dropdown.matDropdownItemByLabel('Option item 1').element());
    await expect(optionItem1).toBeDisplayed('Option Item with text "Option item 1" is not displayed.');
    let optionItem2 = await (await dropdown.matDropdownItemByLabel('Option item 2').element());
    await expect(optionItem2).toBeDisplayed('Option Item with text "Option item 2" is not displayed.');
    let optionItem3 = await (await dropdown.matDropdownItemByLabel('Option item 3').element());
    await expect(optionItem3).toBeDisplayed('Option Item with text "Option item 3" is not displayed.');
    if(browser.config.useWdioImageComparison) {
      await dropdownContent2.scrollIntoView();
      await chaiExpect(await browser.checkElement(dropdownContent2, testFolder+'img_dropdownContent2', {hideElements: [await $('//eui-app-toolbar')]})).within(0, 0.05, 'Image comparison failed for dropdownContent2');
      await optionItem1.scrollIntoView();
      await chaiExpect(await browser.checkElement(optionItem1, testFolder+'img_optionItem1', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for optionItem1');
      await optionItem2.scrollIntoView();
      await chaiExpect(await browser.checkElement(optionItem2, testFolder+'img_optionItem2', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for optionItem2');
      await optionItem3.scrollIntoView();
      await chaiExpect(await browser.checkElement(optionItem3, testFolder+'img_optionItem3', {hideElements: [await $('//eui-app-toolbar')]})).within(0, 0.16, 'Image comparison failed for optionItem3');
    }
    await optionItem1.click();
  });

  it('should verify the Dropdown menu',async () => {
    browser.addTestMeta({zephyrStep: "414399"});
    let index = 5;
    let dropdown = page.dropdownByIndex(index);
    let button = await (await dropdown.euiButtonCO.element());
    await button.scrollIntoView();
    await expect(button).toBeDisplayedInViewport({message:'Dropdown button -> is not displayed on page'});
    await button.click();
    await expect(await $(dropdown.euiDropdownContent.currentPath)).toBeDisplayed({message:'<Options> mat dropdown content -> is not displayed on page'});

    let dropdownMenuItem1 = await (await dropdown.matDropdownItemByLabel('Menu item 1').element());
    let dropdownMenuItem2 = await (await dropdown.matDropdownItemByLabel('Menu item 2').element());
    let dropdownMenuItem3 = await (await dropdown.matDropdownItemByLabel('Menu item 3').element());
    await expect(dropdownMenuItem1).toBeDisplayed('Menu Item with text "Menu item 1" is not displayed.');
    if(browser.config.useWdioImageComparison) {
      await chaiExpect(await browser.checkElement(dropdownMenuItem1, testFolder+'img_dropdownMenuItem1', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for dropdownMenuItem1');
      await chaiExpect(await browser.checkElement(dropdownMenuItem2, testFolder+'img_dropdownMenuItem2', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for dropdownMenuItem2');
      await chaiExpect(await browser.checkElement(dropdownMenuItem3, testFolder+'img_dropdownMenuItem3', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for dropdownMenuItem3');
    }
    await dropdownMenuItem1.click();
    await expect(await $(dropdown.euiDropdownContent.currentPath)).not.toBeDisplayed({message:
      '<Dropdown meu> mat dropdown content -> is still displayed on page after clicking item 1'});
      await button.click();
    await expect(await $(dropdown.euiDropdownContent.currentPath)).toBeDisplayed({message:'<Options> mat dropdown content -> is not displayed on page'});
    await expect(dropdownMenuItem2).toBeDisplayed('Menu Item with text "Menu item 2" is not displayed.');
    await dropdownMenuItem2.click();
    await expect(await $(dropdown.euiDropdownContent.currentPath)).not.toBeDisplayed({message:
      '<Dropdown meu> mat dropdown content -> is still displayed on page after clicking item 2'});
      await button.click();
    await expect(await $(dropdown.euiDropdownContent.currentPath)).toBeDisplayed({message:'<Options> mat dropdown content -> is not displayed on page'});
    await expect(dropdownMenuItem3).toBeDisplayed('Menu Item with text "Menu item 3" is not displayed.');
    await dropdownMenuItem3.click();
    await expect(await $(dropdown.euiDropdownContent.currentPath)).not.toBeDisplayed({message:
      '<Dropdown meu> mat dropdown content -> is still displayed on page after clicking item 3'});
  });
});
