import Routing from '../../../pages/eui/14x/routing.js'
import EuiPopoverPage from '../../../pages/eui/14x/eui-popover.po.js'
import EuiIconPage from '../../../pages/eui/14x/eui-icon.po.js'
import * as CookieBannerActions from '../../../actions/cookieBanner.js'
import EuiSlideTogglePage from '../../../pages/eui/14x/eui-slide-toggle.po.js'
import BaseActions from '../../../actions/V14/base-actions.js'

describe('eUI - <eui-popover> Component Object ', async () => {
  let page = new EuiPopoverPage();
  let icon = new EuiIconPage();
  let slideToggle = new EuiSlideTogglePage();
  let testFolder = './/v14x//eui-popover//';
  let pageName = 'eui-popover'
  it('should navigate to <eui-popover> demo page', async () => {
    browser.addTestMeta({ uuid: "23f15e70-ba5a-11ec-8422-0242ac12000", zephyrKey: "CCQA-2001", zephyrStep: "480311", reportGroups: ["eUI.14x.eui"] });
    await page.open(Routing.getEUIComponentUrl('eui-popover'));
    await CookieBannerActions.cookieBanner(true);
    await BaseActions.verifyPageTitle(pageName);
    await expect(await $(page.navigationList)).toBeDisplayedInViewport({ message: 'Navigation List -> is not displayed on page' });
  });
  it('should verify the presence and number of components <eui-popover> on page ', async () => {
    browser.addTestMeta({ zephyrStep: "480312" });
    let sectionId = 'Default';
    await BaseActions.verifySection(sectionId, pageName);
    let index = 2;
    let iconByIndexAndSection = await (await icon.iconFromSectionWithIdByIndex(sectionId,index).element());
    await expect(iconByIndexAndSection).toExist({ message: 'Icon by index ' + index + ' is not existing on page' });
    await iconByIndexAndSection.click()
    index = 1;
    let popoverOverlayByIndex1 = await $(page.popoverOverlay.getOverlayPopoverDivByIndex(1));
    await expect(popoverOverlayByIndex1).toExist({ message: 'Popover by index ' + index + ' is not existing on page' });
    await expect(popoverOverlayByIndex1).toBeDisplayed({ message: 'Popover by index ' + index + ' is not displayed on page' });
    if(browser.config.env.endsWith('DEV')) {
      await chaiExpect(await page.popoverByIndex(index).defaultComponentsCount()).equal(20, 'There should be 20 <eui-popover> components on the page.');
    }
    else {
      await chaiExpect(await page.popoverByIndex(index).defaultComponentsCount()).equal(20, 'There should be 20 <eui-popover> components on the page.');
    }
    if (browser.config.useWdioImageComparison) {
      await popoverOverlayByIndex1.scrollIntoView();
      await chaiExpect(await browser.checkElement(popoverOverlayByIndex1, testFolder + 'img_popoverOverlayByIndex1', { hideElements: [await $('//eui-app-toolbar')] })).equal(0, 'Image comparison failed for popoverOverlayByIndex1');
    }
  });
  it('should verify the <eui-popover>  position and title ', async () => {
    browser.addTestMeta({ zephyrStep: "480313" });
    let sectionId = 'position';
    await BaseActions.verifySection(sectionId, pageName);
    let index = 2;

    let iconByIndexAndSection = await (await icon.iconFromSectionWithIdByIndex(sectionId,index).element());
    await expect(iconByIndexAndSection).toExist({ message: 'Icon by index ' + index + ' is not existing on page' });
    await iconByIndexAndSection.click()
    index = 1;

    let popoverOverlayBottomPosition = await $(page.popoverOverlay.getOverlayPopoverDivByIndex(index));
    await expect(popoverOverlayBottomPosition).toExist({ message: 'Popover by index ' + index + ' is not existing on page' });
    await expect(popoverOverlayBottomPosition).toBeDisplayed({ message: 'Popover by index ' + index + ' is not displayed on page' });
    await expect(await $(page.popoverOverlay.title)).toBeDisplayed({ message: 'Popover with title is not displayed on page' });
    await chaiExpect(await page.popoverOverlay.hasTitle()).equal(true, 'Popover should have title');
    if (browser.config.useWdioImageComparison) {
      await popoverOverlayBottomPosition.scrollIntoView();
      await chaiExpect(await browser.checkElement(popoverOverlayBottomPosition, testFolder + 'img_popoverOverlayBottomPosition', { hideElements: [await $('//eui-app-toolbar')] })).equal(0, 'Image comparison failed for popoverOverlayBottomPosition');
    }
    let closeIcon = await $(page.popoverOverlay.closeIcon);
    await expect(closeIcon).toExist({ message: 'Close popover icon is not existing on page' });
    await closeIcon.click();
    index = 3;
    iconByIndexAndSection = await (await icon.iconFromSectionWithIdByIndex(sectionId,index).element());
    await expect(iconByIndexAndSection).toExist({ message: 'Icon by index ' + index + ' is not existing on page' });
    await iconByIndexAndSection.click()
    index = 2;
    let popoverOverlayTopPosition = await $(page.popoverOverlay.getOverlayPopoverDivByIndex(2));
    await expect(popoverOverlayTopPosition).toExist({ message: 'Popover by index ' + index + ' is not existing on page' });
    await expect(popoverOverlayTopPosition).toBeDisplayed({ message: 'Popover by index ' + index + ' is not displayed on page' });
    if (browser.config.useWdioImageComparison) {
      await popoverOverlayTopPosition.scrollIntoView();
      await chaiExpect(await browser.checkElement(popoverOverlayTopPosition, testFolder + 'img_popoverOverlayTopPosition', { hideElements: [await $('//eui-app-toolbar')] })).equal(0, 'Image comparison failed for popoverOverlayTopPosition');
      }
    await expect(closeIcon).toExist({ message: 'Close popover icon is not existing on page' });
    await closeIcon.click();
    index = 4;
    iconByIndexAndSection = await (await icon.iconFromSectionWithIdByIndex(sectionId,index).element());
    await expect(iconByIndexAndSection).toExist({ message: 'Icon by index ' + index + ' is not existing on page' });
    await iconByIndexAndSection.click()
    index = 3;
    let popoverOverlayLeftPosition = await $(page.popoverOverlay.getOverlayPopoverDivByIndex(index));
    await expect(popoverOverlayLeftPosition).toExist({ message: 'Popover by index ' + index + ' is not existing on page' });
    await expect(popoverOverlayLeftPosition).toBeDisplayed({ message: 'Popover by index ' + index + ' is not displayed on page' });
    if (browser.config.useWdioImageComparison) {
      await popoverOverlayLeftPosition.scrollIntoView();
      await chaiExpect(await browser.checkElement(popoverOverlayLeftPosition, testFolder + 'img_popoverOverlayLeftPosition', { hideElements: [await $('//eui-app-toolbar')] })).equal(0, 'Image comparison failed for popoverOverlayLeftPosition');
    }
    await expect(closeIcon).toExist({ message: 'Close popover icon is not existing on page' });
    await closeIcon.click();
    index = 5;
    iconByIndexAndSection = await (await icon.iconFromSectionWithIdByIndex(sectionId,index).element());
    await expect(iconByIndexAndSection).toExist({ message: 'Icon by index ' + index + ' is not existing on page' });
    await iconByIndexAndSection.click()
    index = 4;
    let popoverOverlayRightPosition = await $(page.popoverOverlay.getOverlayPopoverDivByIndex(index));
    await expect(popoverOverlayRightPosition).toExist({ message: 'Popover by index ' + index + ' is not existing on page' });
    await expect(popoverOverlayRightPosition).toBeDisplayed({ message: 'Popover by index ' + index + ' is not displayed on page' });
    if (browser.config.useWdioImageComparison) {
      await popoverOverlayRightPosition.scrollIntoView();
      await chaiExpect(await browser.checkElement(popoverOverlayRightPosition, testFolder + 'img_popoverOverlayRightPosition', { hideElements: [await $('//eui-app-toolbar')] })).within(0, 1.2, 'Image comparison failed for popoverOverlayRightPosition');
      }
    await expect(closeIcon).toExist({ message: 'Close popover icon is not existing on page' });
    await closeIcon.click();
  });
  it('should verify the <eui-popover>  close button visibility ', async () => {
    browser.addTestMeta({ zephyrStep: "480314" });
    let sectionId = 'no-close-button';
    let index = 2;
    await BaseActions.verifySection(sectionId, pageName);

    let iconByIndexAndSection = await (await icon.iconFromSectionWithIdByIndex(sectionId,index).element());
    await expect(iconByIndexAndSection).toExist({ message: 'Icon by index ' + index + ' is not existing on page' });
    await iconByIndexAndSection.click()
    index = 1;
    let popoverOverlayCloseButtonVisible = await $(page.popoverOverlay.getOverlayPopoverDivByIndex(index));
    await expect(popoverOverlayCloseButtonVisible).toExist({ message: 'popoverOverlayCloseButtonVisible is not existing on page' });
    await expect(popoverOverlayCloseButtonVisible).toBeDisplayed({ message: 'popoverOverlayCloseButtonVisible is not displayed on page' });
    await expect(await $(page.popoverOverlay.closeButtonCO.currentPath)).toBeDisplayed({ message: 'CloseButton is not displayed on page' });
    await chaiExpect(await page.popoverOverlay.hasCloseButton()).equal(true, 'Popover should have close button');
    if (browser.config.useWdioImageComparison) {
      await popoverOverlayCloseButtonVisible.scrollIntoView();
      await chaiExpect(await browser.checkElement(popoverOverlayCloseButtonVisible, testFolder + 'img_popoverOverlayCloseButtonVisible', { hideElements: [await $('//eui-app-toolbar')] })).equal(0, 'Image comparison failed for popoverOverlayCloseButtonVisible');
    }
    let closeIcon = await $(page.popoverOverlay.closeIcon);
    await expect(closeIcon).toExist({ message: 'Close popover icon is not existing on page' });
    await expect(closeIcon).toBeDisplayed({ message: 'Close popover icon is not displayed on page' });
    await closeIcon.click();
    let hasCloseButtonToogle =await $(slideToggle.slideToggleFromSectionById(sectionId).currentPath);
    await expect(hasCloseButtonToogle).toExist({ message: 'Has close button toogle is not existing on page' });
    await hasCloseButtonToogle.click();
    await expect(iconByIndexAndSection).toExist({ message: 'Icon by index ' + index + ' is not existing on page' });
    await iconByIndexAndSection.click()
    let popoverOverlayCloseButtonNotVisible = await $(page.popoverOverlay.getOverlayPopoverDivByIndex(index));
    await expect(popoverOverlayCloseButtonNotVisible).toExist({ message: 'popoverOverlayCloseButtonNotVisible is not existing on page' });
    await expect(popoverOverlayCloseButtonNotVisible).toBeDisplayed({ message: 'popoverOverlayCloseButtonNotVisible is not displayed on page' });
    if (browser.config.useWdioImageComparison) {
      await popoverOverlayCloseButtonNotVisible.scrollIntoView();
      await chaiExpect(await browser.checkElement(popoverOverlayCloseButtonNotVisible, testFolder + 'img_popoverOverlayCloseButtonNotVisible', { hideElements: [await $('//eui-app-toolbar')] })).equal(0, 'Image comparison failed for popoverOverlayCloseButtonNotVisible');
    }
    await expect(closeIcon).not.toExist({ message: 'Close popover icon is existing on page' });
    await expect(closeIcon).not.toBeDisplayed({ message: 'Close popover icon is displayed on page' });
    await expect(await $(page.popoverOverlay.closeButtonCO.currentPath)).not.toBeDisplayed({ message: 'CloseButton is displayed on page' });
    await chaiExpect(await page.popoverOverlay.hasCloseButton()).equal(false, 'Popover should not have close button');
    await expect(hasCloseButtonToogle).toExist({ message: 'Has close button toogle is not existing on page' });
    await hasCloseButtonToogle.click();
  });
  it('should verify the <eui-popover> size ', async () => {
    browser.addTestMeta({ zephyrStep: "480315" });
    let sectionId = 'size';
    let index = 2;
    await BaseActions.verifySection(sectionId, pageName);

    let iconByIndexAndSection = await (await icon.iconFromSectionWithIdByIndex(sectionId,index).element());
    await expect(iconByIndexAndSection).toExist({ message: 'Icon by index ' + index + ' is not existing on page' });
    await iconByIndexAndSection.click()
    let popoverOverlayDefaultSize = await $(page.popoverOverlay.getOverlayPopoverDivByIndex(1));
    await expect(popoverOverlayDefaultSize).toExist({ message: 'popoverOverlayDefaultSize is not existing on page' });
    await expect(popoverOverlayDefaultSize).toBeDisplayed({ message: 'popoverOverlayDefaultSize is not displayed on page' });
    await expect(popoverOverlayDefaultSize).toHaveAttributeContaining('class','eui-popover--size-default');
    if (browser.config.useWdioImageComparison) {
      await popoverOverlayDefaultSize.scrollIntoView();
      await chaiExpect(await browser.checkElement(popoverOverlayDefaultSize, testFolder + 'img_popoverOverlayDefaultSize', { hideElements: [await $('//eui-app-toolbar')] })).within(0, 0.5, 'Image comparison failed for popoverOverlayDefaultSize');
    }
    let closeIcon = await $(page.popoverOverlay.closeIcon);
    await expect(closeIcon).toExist({ message: 'Close popover icon is not existing on page' });
    await closeIcon.click();

    index = 3;
    iconByIndexAndSection = await (await icon.iconFromSectionWithIdByIndex(sectionId,index).element());
    await expect(iconByIndexAndSection).toExist({ message: 'Icon by index ' + index + ' is not existing on page' });
      await iconByIndexAndSection.click()
    let popoverOverlaySmallSize = await $(page.popoverOverlay.getOverlayPopoverDivByIndex(1));
    await expect(popoverOverlaySmallSize).toExist({ message: 'popoverOverlaySmallSize is not existing on page' });
    await expect(popoverOverlaySmallSize).toBeDisplayed({ message: 'popoverOverlaySmallSize is not displayed on page' });
    await expect(popoverOverlaySmallSize).toHaveAttributeContaining('class','eui-popover--size-small');
    if (browser.config.useWdioImageComparison) {
      await popoverOverlaySmallSize.scrollIntoView();
      await chaiExpect(await browser.checkElement(popoverOverlaySmallSize, testFolder + 'img_popoverOverlaySmallSize', { hideElements: [await $('//eui-app-toolbar')] })).within(0, 0.7, 'Image comparison failed for popoverOverlaySmallSize');
    }
    await expect(closeIcon).toExist({ message: 'Close popover icon is not existing on page' });
    await closeIcon.click();

    index = 4;
    iconByIndexAndSection = await (await icon.iconFromSectionWithIdByIndex(sectionId,index).element());
    await expect(iconByIndexAndSection).toExist({ message: 'Icon by index ' + index + ' is not existing on page' });
    await iconByIndexAndSection.click()
    let popoverOverlayLargeSize = await $(page.popoverOverlay.getOverlayPopoverDivByIndex(1));
    await expect(popoverOverlayLargeSize).toExist({ message: 'popoverOverlayLargeSize is not existing on page' });
    await expect(popoverOverlayLargeSize).toBeDisplayed({ message: 'popoverOverlayLargeSize is not displayed on page' });
    await expect(popoverOverlayLargeSize).toHaveAttributeContaining('class','eui-popover--size-large');
    if (browser.config.useWdioImageComparison) {
      await popoverOverlayLargeSize.scrollIntoView();
      await chaiExpect(await browser.checkElement(popoverOverlayLargeSize, testFolder + 'img_popoverOverlayLargeSize', { hideElements: [await $('//eui-app-toolbar')] })).within(0, 0.4, 'Image comparison failed for popoverOverlayLargeSize');
    }
    await expect(closeIcon).toExist({ message: 'Close popover icon is not existing on page' });
    await closeIcon.click();

    index = 5;
    iconByIndexAndSection = await (await icon.iconFromSectionWithIdByIndex(sectionId,index).element());
    await expect(iconByIndexAndSection).toExist({ message: 'Icon by index ' + index + ' is not existing on page' });
    await iconByIndexAndSection.click()
    let popoverOverlayAutoSize = await $(page.popoverOverlay.getOverlayPopoverDivByIndex(1));
    await expect(popoverOverlayAutoSize).toExist({ message: 'popoverOverlayAutoSize is not existing on page' });
    await expect(popoverOverlayAutoSize).toBeDisplayed({ message: 'popoverOverlayAutoSize is not displayed on page' });
    await expect(popoverOverlayAutoSize).toHaveAttributeContaining('class','eui-popover--size-auto');
    if (browser.config.useWdioImageComparison) {
      await popoverOverlayAutoSize.scrollIntoView();
      await chaiExpect(await browser.checkElement(popoverOverlayAutoSize, testFolder + 'img_popoverOverlayAutoSize', { hideElements: [await $('//eui-app-toolbar')] })).within(0, 0.6, 'Image comparison failed for popoverOverlayAutoSize');
    }
    await expect(closeIcon).toExist({ message: 'Close popover icon is not existing on page' });
    await closeIcon.click();

  });
  it('should verify the <eui-popover> type ', async () => {
    browser.addTestMeta({ zephyrStep: "480316" });
    let sectionId = 'types';
    await BaseActions.verifySection(sectionId, pageName);
    let index = 2;

    let iconByIndexAndSection = await (await icon.iconFromSectionWithIdByIndex(sectionId,index).element());
    await expect(iconByIndexAndSection).toExist({ message: 'Icon by index ' + index + ' is not existing on page' });
    await iconByIndexAndSection.click()
    let popoverOverlayDefaultType = await $(page.popoverOverlay.getOverlayPopoverDivByIndex(1));
    await expect(popoverOverlayDefaultType).toExist({ message: 'popoverOverlayDefaultType is not existing on page' });
    await expect(popoverOverlayDefaultType).toBeDisplayed({ message: 'popoverOverlayDefaultType is not displayed on page' });
    await expect(popoverOverlayDefaultType).toHaveAttributeContaining('class','eui-popover--default');
    if (browser.config.useWdioImageComparison) {
      await popoverOverlayDefaultType.scrollIntoView();
      await chaiExpect(await browser.checkElement(popoverOverlayDefaultType, testFolder + 'img_popoverOverlayDefaultType', { hideElements: [await $('//eui-app-toolbar')] })).within(0, 0.8, 'Image comparison failed for popoverOverlayDefaultType');
    }
    let closeIcon = await $(page.popoverOverlay.closeIcon);
    await expect(closeIcon).toExist({ message: 'Close popover icon is not existing on page' });
    await closeIcon.click();

    index = 3;
    iconByIndexAndSection = await (await icon.iconFromSectionWithIdByIndex(sectionId,index).element());
    await expect(iconByIndexAndSection).toExist({ message: 'Icon by index ' + index + ' is not existing on page' });
    iconByIndexAndSection.click()
    let popoverOverlayFlatType = await $(page.popoverOverlay.getOverlayPopoverDivByIndex(1));
    await expect(popoverOverlayFlatType).toExist({ message: 'popoverOverlayFlatType is not existing on page' });
    await expect(popoverOverlayFlatType).toBeDisplayed({ message: 'popoverOverlayFlatType is not displayed on page' });
    await expect(popoverOverlayFlatType).toHaveAttributeContaining('class','eui-popover--flat');
    if (browser.config.useWdioImageComparison) {
      await popoverOverlayFlatType.scrollIntoView();
      await chaiExpect(await browser.checkElement(popoverOverlayFlatType, testFolder + 'img_popoverOverlayFlatType', { hideElements: [await $('//eui-app-toolbar')] })).within(0, 0.7, 'Image comparison failed for popoverOverlayFlatType');
    }
    await expect(closeIcon).toExist({ message: 'Close popover icon is not existing on page' });
    await closeIcon.click();

    index = 4;
    iconByIndexAndSection = await (await icon.iconFromSectionWithIdByIndex(sectionId,index).element());
    await expect(iconByIndexAndSection).toExist({ message: 'Icon by index ' + index + ' is not existing on page' });
    await iconByIndexAndSection.click()
    let popoverOverlayColoredHeaderType = await $(page.popoverOverlay.getOverlayPopoverDivByIndex(1));
    await expect(popoverOverlayColoredHeaderType).toExist({ message: 'popoverOverlayColoredHeaderType is not existing on page' });
    await expect(popoverOverlayColoredHeaderType).toBeDisplayed({ message: 'popoverOverlayColoredHeaderType is not displayed on page' });
    await expect(popoverOverlayColoredHeaderType).toHaveAttributeContaining('class','eui-popover--colored-header');
    if (browser.config.useWdioImageComparison) {
      await popoverOverlayColoredHeaderType.scrollIntoView();
      await chaiExpect(await browser.checkElement(popoverOverlayColoredHeaderType, testFolder + 'img_popoverOverlayColoredHeaderType', { hideElements: [await $('//eui-app-toolbar')] })).within(0,0.7, 'Image comparison failed for popoverOverlayColoredHeaderType');
    }
    await expect(closeIcon).toExist({ message: 'Close popover icon is not existing on page' });
    await closeIcon.click();

    index = 5;
    iconByIndexAndSection = await (await icon.iconFromSectionWithIdByIndex(sectionId,index).element());
    await expect(iconByIndexAndSection).toExist({ message: 'Icon by index ' + index + ' is not existing on page' });
    await iconByIndexAndSection.click()
    let popoverOverlayColoredSolidType = await $(page.popoverOverlay.getOverlayPopoverDivByIndex(1));
    await expect(popoverOverlayColoredSolidType).toExist({ message: 'popoverOverlayColoredSolidType is not existing on page' });
    await expect(popoverOverlayColoredSolidType).toBeDisplayed({ message: 'popoverOverlayColoredSolidType is not displayed on page' });
    await expect(popoverOverlayColoredSolidType).toHaveAttributeContaining('class','eui-popover--colored-solid');
    if (browser.config.useWdioImageComparison) {
      await popoverOverlayColoredSolidType.scrollIntoView();
      await chaiExpect(await browser.checkElement(popoverOverlayColoredSolidType, testFolder + 'img_popoverOverlayColoredSolidType', { hideElements: [await $('//eui-app-toolbar')] })).within(0, 0.6, 'Image comparison failed for popoverOverlayColoredSolidType');
    }
    await expect(closeIcon).toExist({ message: 'Close popover icon is not existing on page' });
    await closeIcon.click();
  });
});
