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

describe('eUI - <eui-card> Component Object ', async () => {
  let page = new EuiCardPage();
  let testFolder = './/v14x//eui-card//';
  let pageName = 'eui-card';
  it('should navigate to <eui-card> demo page', async () => {
    browser.addTestMeta({uuid:"02e24b84-d047-11eb-b8bc-0242ac130003", zephyrKey: "CCQA-1120", zephyrStep: "409999", reportGroups: ["eUI.14x.eui"]});
    await page.open(Routing.getEUIComponentUrl('eui-card'));
    await CookieBannerActions.cookieBanner(true);
    await BaseActions.verifyPageTitle(pageName);
    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-card> on page ', async () => {
    browser.addTestMeta({zephyrStep: "410000"});
    let sectionId= 'Default';
    await BaseActions.verifySection(sectionId, pageName);
    let card = page.euiCardCO.byIndex(1);
    await (await card.element()).scrollIntoView();
    await expect(await $(card.currentPath)).toBeDisplayedInViewport({wait: 2000, message:'Card by index "1" is not displayed on page'});
    await expect(await $(page.cardByTextContains('Shiba Inu').currentPath)).toBeDisplayedInViewport({wait: 2000, message:'Card by text "Shiba Inu" is not displayed on page'});
    await expect(await $(page.cardByTextEqualsAndIndex('Shiba Inu', 1).currentPath)).toBeDisplayedInViewport({wait: 2000, message:'Card by text "Shiba Inu" and index 1 is not displayed on page'});
  });
  it('should verify the methods container, header, hasHeader, media, hasMedia ', async () => {
    browser.addTestMeta({zephyrStep: "410001"});
    let sectionId = 'card-header';
    await BaseActions.verifySection(sectionId, pageName);
    let card = page.cardFromSectionById(sectionId);
    await expect(await $(card.currentPath)).toBeDisplayedInViewport({wait: 2000, message:'Card container is not displayed on page'});
    await expect(await $(card.euiCardHeaderCO.currentPath)).toBeDisplayedInViewport({wait: 2000, message:'Card header is not displayed on page'});
    await chaiExpect(await card.hasHeader()).equal(true, 'Card should have header.');
    await chaiExpect(await card.hasMedia()).equal(false, 'Card should not have media.');
    let imageComparisonCard = await page.cardFromSectionById('Default').byIndex(1).element();
    if(browser.config.useWdioImageComparison) {
      await imageComparisonCard.scrollIntoView();
      await chaiExpect(await browser.checkElement(imageComparisonCard, testFolder+'img_cardByIndex1',
      {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for cardByIndex1');
    }
    sectionId = 'media-cards';
    await BaseActions.verifySection(sectionId, pageName);
    card = page.cardFromSectionById(sectionId);
    await chaiExpect(await card.hasHeader()).equal(false, 'Card should have header.');
  });
  it('should verify the methods content, hasContent, footer, hasFooter ', async () => {
    browser.addTestMeta({zephyrStep: "410002"});
    let sectionId = 'Default';
    await BaseActions.verifySection(sectionId, pageName);
    let card = page.cardFromSectionById(sectionId);
    let imageComparisonCardHeader = await $(page.cardFromSectionById('Default').byIndex(2).euiCardHeaderCO.currentPath);
    let imageComparisonCardContent = await $(page.cardFromSectionById('Default').byIndex(2).euiCardContentCO.currentPath);
    let imageComparisonCardFooter = await $(page.cardFromSectionById('Default').byIndex(2).euiCardFooterCO.currentPath);
    if(browser.config.useWdioImageComparison) {
      await imageComparisonCardHeader.scrollIntoView();
      await chaiExpect(await browser.checkElement(imageComparisonCardHeader, testFolder+'img_cardByIndex2_cardHeader',
      {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for cardByIndex2_cardHeader');
      await chaiExpect(await browser.checkElement(imageComparisonCardContent, testFolder+'img_cardByIndex2_cardContent',
      {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for cardByIndex2_cardContent');
      if (browser.config.env.endsWith('DEV')){
      await chaiExpect(await browser.checkElement(imageComparisonCardFooter, testFolder+'img_cardByIndex2_cardFooterDev',
      {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for cardByIndex2_cardFooter');
      }
      else{
        await chaiExpect(await browser.checkElement(imageComparisonCardFooter, testFolder+'img_cardByIndex2_cardFooter',
      {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for cardByIndex2_cardFooter');
      }
    }
    await (await $(card.euiCardContentCO.currentPath)).scrollIntoView();
    await expect(await $(card.euiCardContentCO.currentPath)).toBeDisplayedInViewport({wait: 2000, message:'Card content is not displayed on page'});
    await chaiExpect(await card.hasContent()).equal(true, 'Card should have content.');

    sectionId = 'card-footer';
    await BaseActions.verifySection(sectionId, pageName);
    card = page.cardFromSectionById(sectionId);
    await expect(await $(card.euiCardFooterCO.currentPath)).toBeDisplayedInViewport({wait: 2000, message:'Card footer is not displayed on page'});
    await chaiExpect(await card.hasFooter()).equal(true, 'Card should have footer.');
  });
  it('should verify the methods content, isCollapsible, isCollapsed, isSelected, isUrgent, isNoShadow ', async () => {
    browser.addTestMeta({zephyrStep: "410003"});
    let sectionId = 'card-header';
    await BaseActions.verifySection(sectionId, pageName);
    let imageComparisonCardAvatar = await page.cardFromSectionById('card-header').byIndex(4).element();
    let imageComparisonCardIcon = await page.cardFromSectionById('card-header').byIndex(5).element();

    if(browser.config.useWdioImageComparison) {
      await imageComparisonCardAvatar.scrollIntoView();
      if (browser.config.env.endsWith('DEV')){
      await chaiExpect(await browser.checkElement(imageComparisonCardAvatar, testFolder+'img_cardAvatarDev',
      {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for img_cardAvatar');
      await chaiExpect(await browser.checkElement(imageComparisonCardIcon, testFolder+'img_cardIconDev',
      {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for img_cardIcon');
      }
      else{
        await chaiExpect(await browser.checkElement(imageComparisonCardAvatar, testFolder+'img_cardAvatar',
        {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for img_cardAvatar');
        await chaiExpect(await browser.checkElement(imageComparisonCardIcon, testFolder+'img_cardIcon',
        {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for img_cardIcon');
      }

    }

    let card = page.cardFromSectionById(sectionId);
    await chaiExpect(await card.isCollapsible()).equal(true, 'Card should be collapsible.');
    await chaiExpect(await card.isCollapsed()).equal(true, 'Card should be collapsed.');
    await chaiExpect(await card.isSelected()).equal(false, 'Card should not be selected.');

    sectionId = 'states';
    await BaseActions.verifySection(sectionId, pageName);
    card = page.cardFromSectionWithIdByIndex(sectionId,8);
    await chaiExpect(await card.isSelected()).equal(true, 'Card should be selected.');
    await chaiExpect(await card.isCollapsible()).equal(false, 'Card should not be collapsible.');
    await chaiExpect(await card.isCollapsed()).equal(false, 'Card should not be collapsed.');

    sectionId = 'cards-list';
    await BaseActions.verifySection(sectionId, pageName);
    card = page.cardFromSectionWithIdByIndex(sectionId,1);
    await chaiExpect(await card.isUrgent()).equal(true, 'Card should be urgent.');
    await chaiExpect(await card.isNoShadow()).equal(false, 'Card should have shadow');

    sectionId = 'media-cards';
    await BaseActions.verifySection(sectionId, pageName);
    card = page.cardFromSectionWithIdByIndex(sectionId,1);
  });
  it('should verify image comparison', async () => {
    browser.addTestMeta({zephyrStep: "410004"});
    let sectionId = 'states';
    await BaseActions.verifySection(sectionId, pageName);
    let imageComparisonCardStatePrim = await page.cardFromSectionById(sectionId).byIndex(1).element();
    let imageComparisonCardStateSucc = await page.cardFromSectionById(sectionId).byIndex(3).element();
    let imageComparisonCardStateDang = await page.cardFromSectionById(sectionId).byIndex(6).element();

    if (browser.config.useWdioImageComparison) {
      if (browser.config.env.endsWith('DEV')) {
        await chaiExpect(await browser.checkElement(imageComparisonCardStatePrim, testFolder + 'img_cardStatePrimaryDev',
          { hideElements: [await $('//eui-app-toolbar')] })).equal(0, 'Image comparison failed for img_cardStatePrimary');
        await chaiExpect(await browser.checkElement(imageComparisonCardStateSucc, testFolder + 'img_cardStateSuccessDev',
          { hideElements: [await $('//eui-app-toolbar')] })).equal(0, 'Image comparison failed for img_cardStateSuccess');
        await chaiExpect(await browser.checkElement(imageComparisonCardStateDang, testFolder + 'img_cardStateDangerDev',
          { hideElements: [await $('//eui-app-toolbar')] })).equal(0, 'Image comparison failed for img_cardStateDanger');
      } else {
        await chaiExpect(await browser.checkElement(imageComparisonCardStatePrim, testFolder + 'img_cardStatePrimary',
          { hideElements: [await $('//eui-app-toolbar')] })).equal(0, 'Image comparison failed for img_cardStatePrimary');
        await chaiExpect(await browser.checkElement(imageComparisonCardStateSucc, testFolder + 'img_cardStateSuccess',
          { hideElements: [await $('//eui-app-toolbar')] })).equal(0, 'Image comparison failed for img_cardStateSuccess');
        await chaiExpect(await browser.checkElement(imageComparisonCardStateDang, testFolder + 'img_cardStateDanger',
          { hideElements: [await $('//eui-app-toolbar')] })).equal(0, 'Image comparison failed for img_cardStateDanger');
      }
    }
  });
  it('should verify card container', async () => {
    browser.addTestMeta({zephyrStep: "414088"});
    let sectionId = 'card-container';
    await BaseActions.verifySection(sectionId, pageName);
    let card = page.cardFromSectionWithIdByIndex(sectionId, 1);
    await expect(await $(card.currentPath)).toBeDisplayedInViewport({wait: 2000, message:'Card container is not displayed on page'});
    await expect(await $(card.euiCardHeaderCO.currentPath)).toBeDisplayedInViewport({wait: 2000, message:'eui-card-header is not displayed on page'})
    await expect(await $((await card.euiCardHeaderCO.euiCardHeaderTitleCO()).currentPath)).toBeDisplayedInViewport({wait: 2000, message:'eui-card-header-title is not displayed on page'});
    await expect(await $((await card.euiCardHeaderCO.euiCardHeaderSubtitleCO()).currentPath)).toBeDisplayedInViewport({wait: 2000, message:'eui-card-header-subtitle is not displayed on page'});
    await expect(await $(page.cardFromSectionWithIdByIndex(sectionId, 2).euiCardContentCO.currentPath)).toBeDisplayedInViewport({wait: 2000, message:'eui-card-content is not displayed on page'});
  });
  it('should verify card header', async () => {
    browser.addTestMeta({zephyrStep: "414089"});
    let sectionId = 'card-header';
    await BaseActions.verifySection(sectionId, pageName);
    let card = page.cardFromSectionWithIdByIndex(sectionId, 1);
    await expect(await $(card.euiCardHeaderCO.currentPath)).toBeDisplayedInViewport({wait: 2000, message:'eui-card-header is not displayed on page'})
    await expect(await $((await card.euiCardHeaderCO.euiCardHeaderTitleCO()).currentPath)).toBeDisplayedInViewport({wait: 2000, message:'eui-card-header-title is not displayed on page'});
    await expect(await $((await card.euiCardHeaderCO.euiCardHeaderSubtitleCO()).currentPath)).toBeDisplayedInViewport({wait: 2000, message:'eui-card-header-subtitle is not displayed on page'});
    await chaiExpect(await card.isCollapsible()).equal(true, 'Card should be collapsible.');

    await (await $(page.cardFromSectionWithIdByIndex(sectionId,2).currentPath)).scrollIntoView();
    if(browser.config.env.endsWith('DEV')) {
      card = page.cardFromSectionWithIdByIndex(sectionId, 5);
    } else {
      card = page.cardFromSectionWithIdByIndex(sectionId, 5);
    }
    await (await card.element()).scrollIntoView();
    await expect(await $(card.euiCardHeaderCO.avatar)).toBeDisplayedInViewport({wait: 2000, message:'avatar is not displayed on page'});
    await chaiExpect(await card.euiCardHeaderCO.hasAvatar()).equal(true, 'Card should have avatar.');
    await chaiExpect(await card.euiCardHeaderCO.hasIcon()).equal(false, 'Card should not have icon.');
    await expect(await $((await card.euiCardHeaderCO.titleContainer()))).toBeDisplayedInViewport({wait: 2000, message:'titleContainer is not displayed on page'});
    await expect(await $((await card.euiCardHeaderCO.euiCardHeaderTitleCO()).currentPath)).toBeDisplayedInViewport({wait: 2000, message:'title is not displayed on page'});
    await expect(await $((await card.euiCardHeaderCO.euiCardHeaderSubtitleCO()).currentPath)).toBeDisplayedInViewport({wait: 2000, message:'subtitle is not displayed on page'});

    if(browser.config.env.endsWith('DEV')) {
      card = page.cardFromSectionWithIdByIndex(sectionId, 12);
    } else {
      card = page.cardFromSectionWithIdByIndex(sectionId, 12);
    }
    await (await card.element()).scrollIntoView();
    await expect(await $(card.euiCardHeaderCO.euiCardHeaderLeftContentCO.currentPath)).toBeDisplayedInViewport({wait: 2000, message:'Card header with left content is not displayed on page'});
    await expect(await $((await card.euiCardHeaderCO.euiCardHeaderRightContentCO()).currentPath)).toBeDisplayedInViewport({wait: 2000, message:'Card header with right content is not displayed on page'});
  });
  it('should verify card footer', async () => {
    browser.addTestMeta({zephyrStep: "414090"});
    let sectionId = 'card-footer';
    await BaseActions.verifySection(sectionId, pageName);
    let card = page.cardFromSectionWithIdByIndex(sectionId, 1);
    await expect(await $(card.euiCardFooterCO.currentPath)).toBeDisplayedInViewport({wait: 2000, message:'eui-card-footer is not displayed on page'})
    await expect(await $(card.euiCardFooterCO.euiCardFooterActionButtonsCO.currentPath)).toBeDisplayedInViewport({wait: 2000, message:'eui-card-footer-action-buttons is not displayed on page'});
    await expect(await $(card.euiCardFooterCO.euiCardFooterActionIconsCO.currentPath)).toBeDisplayedInViewport({wait: 2000, message:'eui-card-footer-action-icons is not displayed on page'});
    await expect(await $(card.euiCardFooterCO.euiCardFooterMenuContentCO.currentPath)).toBeDisplayedInViewport({wait: 2000, message:'eui-card-footer-menu-content is not displayed on page'});
    await expect(await $(page.cardFromSectionWithIdByIndex(sectionId, 3).euiCardFooterCO.euiCardFooterActionButtonsCO.currentPath)).toHaveElementClassContaining('justify-content-end');
    await expect(await $(page.cardFromSectionWithIdByIndex(sectionId, 4).euiCardFooterCO.euiCardFooterActionButtonsCO.currentPath)).toHaveElementClassContaining('justify-content-center');
    await expect(await $(page.cardFromSectionWithIdByIndex(sectionId, 5).euiCardFooterCO.euiCardFooterActionButtonsCO.currentPath)).toHaveElementClassContaining('justify-content-between');
  });
  it('should verify cards list', async () => {
    browser.addTestMeta({zephyrStep: "414091"});
    let sectionId = 'cards-list';
    await BaseActions.verifySection(sectionId, pageName);
    let imageComparisonCardsList = await $(page.cardFromSectionById(sectionId).byIndex(1).currentPath);
    await imageComparisonCardsList.scrollIntoView();
    if(browser.config.useWdioImageComparison) {
      await imageComparisonCardsList.scrollIntoView();
      if (browser.config.env.endsWith('DEV')){
      await chaiExpect(await browser.checkElement(imageComparisonCardsList, testFolder+'img_cardsList_byIndex1Dev',
      {hideElements: [await $('//eui-app-toolbar')]})).within(0, 0.03, 'Image comparison failed for img_cardsList_byIndex1');
      }
      else{
        await chaiExpect(await browser.checkElement(imageComparisonCardsList, testFolder+'img_cardsList_byIndex1',
        {hideElements: [await $('//eui-app-toolbar')]})).within(0, 0.03, 'Image comparison failed for img_cardsList_byIndex1');
      }
    }
    let card = page.cardFromSectionWithIdByIndex(sectionId, 1);
    await expect(await $(card.currentPath)).toBeDisplayedInViewport({wait: 2000, message:'eui-card is not displayed on page'});
    await chaiExpect(await card.isCollapsible()).equal(true, 'Card should be collapsible.');
    await chaiExpect(await card.isCollapsed()).equal(true, 'Card should be collapsed');
    await chaiExpect(await card.isUrgent()).equal(true, 'Card should be urgent');
    await expect(await $(card.euiCardHeaderCO.currentPath)).toBeDisplayedInViewport({wait: 2000,message:'eui-card-header is not displayed on page'})
    await expect(await $((await card.euiCardHeaderCO.euiCardHeaderTitleCO()).currentPath)).toBeDisplayedInViewport({wait: 2000, message:'eui-card-header-title is not displayed on page'});
    await expect(await $((await card.euiCardHeaderCO.euiCardHeaderSubtitleCO()).currentPath)).toBeDisplayedInViewport({wait: 2000, message:'eui-card-header-subtitle is not displayed on page'});
  });
  it('should verify editable card', async () => {
    browser.addTestMeta({zephyrStep: "414092"});
    let sectionId = 'card-editable';
    await BaseActions.verifySection(sectionId, pageName);
    let card = page.cardFromSectionWithIdByIndex(sectionId, 1);
    await expect(await $(card.currentPath)).toBeDisplayedInViewport({wait: 2000, message:'eui-card is not displayed on page'});
    await expect(await $(card.euiCardContentCO.currentPath)).toBeDisplayedInViewport({wait: 2000, message:'eui-card-content is not displayed on page'});
    await expect(await $(card.euiCardContentCO.currentPath + "//eui-editor")).toBeDisplayedInViewport({wait: 2000, message:'mat-card-content is not displayed on page'});
  });
  it('should verify States', async () => {
    browser.addTestMeta({zephyrStep: "414093"});
    let sectionId = 'states';
    await BaseActions.verifySection(sectionId, pageName);
    await expect(await $(page.cardFromSectionWithIdByIndex(sectionId, 1).currentPath)).toHaveAttrContaining('class', 'eui-card--primary');
    await expect(await $(page.cardFromSectionWithIdByIndex(sectionId, 2).currentPath)).toHaveAttrContaining('class', 'eui-card--secondary');
    await expect(await $(page.cardFromSectionWithIdByIndex(sectionId, 3).currentPath)).toHaveAttrContaining('class', 'eui-card--success');
    await expect(await $(page.cardFromSectionWithIdByIndex(sectionId, 4).currentPath)).toHaveAttrContaining('class', 'eui-card--info');
    await expect(await $(page.cardFromSectionWithIdByIndex(sectionId, 5).currentPath)).toHaveAttrContaining('class', 'eui-card--warning');
    await expect(await $(page.cardFromSectionWithIdByIndex(sectionId, 6).currentPath)).toHaveAttrContaining('class', 'eui-card--danger');
    await expect(await $(page.cardFromSectionWithIdByIndex(sectionId, 7).currentPath)).toHaveAttrContaining('class', 'eui-card--accent');
    await expect(await $(page.cardFromSectionWithIdByIndex(sectionId, 8).currentPath)).toHaveAttrContaining('class', 'eui-card--selected');
  });
  xit('should verify charts featured cards', async () => {
    browser.addTestMeta({zephyrStep: "414094"});
    let sectionId = 'Default';
    await BaseActions.verifySection(sectionId, pageName);
    let card = page.cardFromSectionWithIdByIndex(sectionId, 1);
    await expect(await $(card.currentPath)).toBeDisplayedInViewport({wait: 2000, message:'eui-card is not displayed on page'});
    await expect(await $(card.euiCardContentCO.currentPath)).toBeDisplayedInViewport({wait: 2000, message:'eui-card-content is not displayed on page'});
  });
  it('should verify content viewer', async () => {
    browser.addTestMeta({zephyrStep: "414095"});
    let sectionId = 'pictures-viewer';
    await BaseActions.verifySection(sectionId, pageName);
    let card = page.cardFromSectionWithIdByIndex(sectionId, 1);
    await expect(await $(card.currentPath)).toBeDisplayedInViewport({wait: 2000, message:'eui-card is not displayed on page'});
    await expect(await $(card.euiCardMediaCO.container)).toBeDisplayedInViewport({wait: 2000, message:'eui-card-media container is not displayed on page'});
    await expect(await $(card.euiCardMediaCO.image)).toBeDisplayedInViewport({wait: 2000, message:'mat-card-media image is not displayed on page'});
    await chaiExpect(await card.euiCardMediaCO.hasLegend()).equal(true, 'Card should have legend.');
    await expect(await $(card.euiCardMediaCO.legend)).toHaveTextContaining('Shiba Inu');
    sectionId = 'card-footer';
    await BaseActions.verifySection(sectionId, pageName);
    card = page.cardFromSectionWithIdByIndex(sectionId, 1);
    await expect(await $(card.euiCardFooterCO.euiCardFooterActionIconsCO.currentPath)).toBeDisplayedInViewport({wait: 2000,
      message:'eui-card-footer-action-icons is not displayed on page'});
  });
  it('should verify Media featured cards', async () => {
    browser.addTestMeta({zephyrStep: "414096"});
    let sectionId = 'pictures-viewer';
    await BaseActions.verifySection(sectionId, pageName);
    let card = page.cardFromSectionWithIdByIndex(sectionId, 2);
    let imageComparisonCardMedia = await page.cardFromSectionWithIdByIndex(sectionId, 1).euiCardMediaCO.element();
    if(browser.config.useWdioImageComparison) {
      await imageComparisonCardMedia.scrollIntoView();
      await chaiExpect(await browser.checkElement(imageComparisonCardMedia, testFolder+'img_cardMedia', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for img_cardMedia');
    }
    await (await card.element()).scrollIntoView()
    await expect(await $(card.currentPath)).toBeDisplayedInViewport({wait: 2000, message:'eui-card is not displayed on page'});
    await expect(await $(card.euiCardMediaCO.container)).toBeDisplayedInViewport({wait: 2000, message:'eui-card-media container is not displayed on page'});
    await expect(await $(card.euiCardContentCO.currentPath)).toBeDisplayedInViewport({wait: 2000, message:'eui-card-content image is not displayed on page'});
  });
  it('should verify Table featured cards', async () => {
    browser.addTestMeta({zephyrStep: "414098"});
    let sectionId = 'card-table';
    await BaseActions.verifySection(sectionId, pageName);
    let card = page.cardFromSectionWithIdByIndex(sectionId, 1);
    await expect(await $(card.currentPath)).toBeDisplayedInViewport({wait: 2000, message:'eui-card is not displayed on page'});
  });

});
