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

describe('eUI - <eui-feedback-message> Component Object ',async () => {
  let page = new EuiFeedbackMessagePage();
  let testFolder = './/v14x//eui-feedback-message//'
  let pageName = 'eui-feedback-message'
  it('should navigate to <eui-feedback-message> demo page',async () => {
    browser.addTestMeta({uuid:"34c1a98e-4170-11ec-81d3-0242ac130003", zephyrKey: "CCQA-1787", zephyrStep: "442855", reportGroups: ["eUI.14x.eui"]});
    await page.open(Routing.getEUIComponentUrl('eui-feedback-message'));
    await CookieBannerActions.cookieBanner(true);
    await BaseActions.verifyPageTitle(pageName);
    await expect(await $(page.navigationList)).toBeDisplayedInViewport({message:'Navigation List -> is not visible on page'});
  });

  it('should verify the presence and number of components <eui-feedback-message> on page ',async () => {
    browser.addTestMeta({zephyrStep: "442857"});
    let sectionId= 'Default';
    await BaseActions.verifySection(sectionId, pageName);
    let index = 1;
    let text = 'This is the default control feedback';
    let feedbackMessageByIndex = await (await page.feedbackMessageByIndex(index).element());
    let feedbackMessageByText = await (await page.feedbackMessageByTextContains(text).element());
    let feedbackMessageByTextAndIndex = await (await page.feedbackMessageByTextEqualsAndIndex(text,index).element());
    await expect(await $(page.sectionById(sectionId))).toBeDisplayed({message:''+sectionId+' section -> is not displayed on page'});
    await expect(feedbackMessageByIndex).toBeDisplayed({message:'feedbackMessage by index '+ index +' is not displayed on page'});
    await expect(feedbackMessageByText).toBeDisplayed({message:'feedbackMessage by text '+ text +' is not displayed on page'});
    await expect(feedbackMessageByTextAndIndex).toBeDisplayed({message:'feedbackMessage by text '+ text +'and by index '+ index +' is not displayed on page'});
    await chaiExpect(await page.feedbackMessageByIndex(index).defaultComponentsCount()).equal(11, 'There should be 11 <eui-feedback-message> components on the page.');

    if(browser.config.useWdioImageComparison) {
      await feedbackMessageByIndex.scrollIntoView();
      await chaiExpect(await browser.checkElement(feedbackMessageByIndex, testFolder+'img_feedbackMessageByIndex', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for feedbackMessageByIndex');
      await feedbackMessageByText.scrollIntoView();
      await chaiExpect(await browser.checkElement(feedbackMessageByText, testFolder+'img_feedbackMessageByText', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for feedbackMessageByText');
      await feedbackMessageByTextAndIndex.scrollIntoView();
      await chaiExpect(await browser.checkElement(feedbackMessageByTextAndIndex, testFolder+'img_feedbackMessageByTextAndIndex', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for feedbackMessageByTextAndIndex');
    }
  });

  it('should verify the <eui-feedback-message> message-types',async () => {
    browser.addTestMeta({zephyrStep: "442858"});
    let sectionId = 'type';
    await BaseActions.verifySection(sectionId, pageName);
    let feedbackMessageColor1 = await (await page.feedbackMessageFromSectionWithIdByIndex(sectionId, 1).element());
    let feedbackMessageColor2 = await (await page.feedbackMessageFromSectionWithIdByIndex(sectionId, 2).element());
    let feedbackMessageColor3 = await (await page.feedbackMessageFromSectionWithIdByIndex(sectionId, 3).element());
    let feedbackMessageColor4 = await (await page.feedbackMessageFromSectionWithIdByIndex(sectionId, 4).element());

   await expect(feedbackMessageColor1).toHaveAttrContaining('class', 'eui-feedback-message--info');
   await expect(feedbackMessageColor2).toHaveAttrContaining('class', 'eui-feedback-message--success');
   await expect(feedbackMessageColor3).toHaveAttrContaining('class', 'eui-feedback-message--warning');
   await expect(feedbackMessageColor4).toHaveAttrContaining('class', 'eui-feedback-message--danger');

    if(browser.config.useWdioImageComparison) {
      await feedbackMessageColor1.scrollIntoView();
      await chaiExpect(await browser.checkElement(feedbackMessageColor1, testFolder+'img_feedbackMessageColor1', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for feedbackMessageColor1');
      await feedbackMessageColor2.scrollIntoView();
      await chaiExpect(await browser.checkElement(feedbackMessageColor2, testFolder+'img_feedbackMessageColor2', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for feedbackMessageColor2');
      await feedbackMessageColor3.scrollIntoView();
      await chaiExpect(await browser.checkElement(feedbackMessageColor3, testFolder+'img_feedbackMessageColor3', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for feedbackMessageColor3');
      await feedbackMessageColor4.scrollIntoView();
      await chaiExpect(await browser.checkElement(feedbackMessageColor4, testFolder+'img_feedbackMessageColor4', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for feedbackMessageColor4');
    }
  });
});
