import Routing from '../../../../pages/eui/10x/routing-10x.js'
import CookieBannerActions from '../../../../actions/cookieBanner.js'
import WizardStepPage from '../../../../pages/eui/10x/ux/ux-wizard-step-10x.po.js'

describe('eUI - <ux-wizard-step> Component Object', async () => {
  let page = new WizardStepPage();
  it('should navigate to <ux-wizard-step> component', async () => {
    browser.addTestMeta({uuid:"976cb6fe-c3a4-11eb-8529-0242ac130003", zephyrKey: "CCQA-1070", zephyrStep: "400656", reportGroups: ["eUI.10x.ux"]});
    await page.open(Routing.getUxComponentUrl('ux-wizard-step'));
    await CookieBannerActions.cookieBanner(true);
    let pgTitle = await $(page.pageTitle);

    let appDocPageId = await $(page.appDocPageById('ux-wizard-step'));
    let navigationList = await $(page.navigationList);
    await expect(pgTitle).toBeDisplayed({wait:1000, message:'<ux-wizard-step> page title is not visible on page'});
    await chaiExpect(await pgTitle.getText()).equal('ux-wizard-step', 'Page title text is not as expected')
    await expect(appDocPageId).toExist({wait:1000, message:'Page Id is not present in page'});
    await expect(navigationList).toBeDisplayed({wait:1000, message:'Navigation List -> is not visible on page'});
  });
  it('should verify the presence and number of component objects <ux-wizard-step> on page ', async () => {
    browser.addTestMeta({zephyrStep: "400658"});
    let sectionId= 'Default';
    let scrollIntoSection = await $(page.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();
    let step = page.stepByIndex(2);
    await expect(await $(page.sectionById(sectionId))).toBeDisplayedInViewport({message:'<Default> section -> is not visible on page'});
    await expect(await $(step.dataE2E)).toBeDisplayedInViewport({message:'Wizard step by index "2" is not visible on page'});
    await expect(await $(page.stepByTextContains('STEP 2').dataE2E)). toBeDisplayedInViewport({message:'Wizard step by text "STEP 2" is not visible on page'});
    await expect(await $(page.stepByTextEqualsAndIndex('STEP 2', 1).dataE2E)).
      toBeDisplayedInViewport({message:'Wizard step by text "STEP 2" and index 1 is not visible on page'});
    await expect(await step.defaultComponentsCount()).toBe(22,'There should be 22 <ux-wizard-step> components on the page.');
  });
  it('should verify the presence and number of component objects <ux-wizard-steps> on page ', async () => {
    browser.addTestMeta({zephyrStep: "400660"});
    let sectionId= 'Default';
    let scrollIntoSection = await $(page.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();
    let steps = page.stepsByIndex(1);
    await expect(await $(page.sectionById(sectionId))).toBeDisplayedInViewport({message:'<Default> section -> is not visible on page'});
    await expect(await $(steps.dataE2E)).toBeDisplayedInViewport({message:'Wizard steps by index "1" is not visible on page'});
    await expect(await $(page.stepsByTextContains('STEP 1').dataE2E)).toBeDisplayedInViewport({message:'Wizard steps by text "STEP 1" is not visible on page'});
    await expect(await $(page.stepsByTextEqualsAndIndex('STEP 1', 1).dataE2E)).
      toBeDisplayedInViewport({message:'Wizard step by text "STEP 1" and index 1 is not visible on page'});
    await expect(await steps.defaultComponentsCount()).toBe(6,'There should be 6 <ux-wizard-step> components on the page.');
  });
  it('should verify the presence and number of component objects <ux-wizard-steps-step> on page ', async () => {
    browser.addTestMeta({zephyrStep: "400661"});
    let sectionId= 'Default';
    let scrollIntoSection = await $(page.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();
    let step = page.stepsByIndex(1).wizardStepsStepCO;
    await expect(await $(page.sectionById(sectionId))).toBeDisplayedInViewport({message:'<Default> section -> is not visible on page'});
    await expect(await $(step.currentPath)).toBeDisplayedInViewport({message:'Wizard steps step by is not visible on page'});
    await expect(await $(page.stepsByIndex(1).wizardStepsStepByIndex(2).currentMarker)).toBeDisplayedInViewport({message:'currentMarker is not visible on page'});
    await expect(await step.defaultComponentsCount()).toBe(4, 'There should be 4 <ux-wizard-step> components on the page.');
  });
  it('should verify the ux-wizard-step CO methods: isActive, panelCO, isShowStepTitle ', async () => {
    browser.addTestMeta({zephyrStep: "400662"});
    let sectionId= 'Default';
    let scrollIntoSection = await $(page.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();
    let step = page.stepByIndex(2);
    await expect(await $(step.dataE2E)).toBeDisplayedInViewport({message:'dataE2E is not visible on page'});
    await expect(await step.isActive()).toBe(true,'isActive should be true');
    await expect(await $(step.panelCO.currentPath)).toBeDisplayedInViewport({message:'panelCO is not visible on page'});
    await expect(await step.isShowStepTitle()).toBe(false,'isShowStepTitle should be false');
    sectionId= 'isShowStepTitle';
    scrollIntoSection = await $(page.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();
    step = page.stepFromSectionWithIdByIndex(sectionId,2);
    await expect(await $(step.title)).toBeDisplayedInViewport({message:'title is not visible on page'});
    await expect(await step.isShowStepTitle()).toBe(true,'isShowStepTitle should be true');
  });
  it('should verify the ux-wizard-step CO methods: content, hasCustomContent, wizardStepContent ', async () => {
    browser.addTestMeta({zephyrStep: "400663"});
    let sectionId= 'content-custom';
    let scrollIntoSection = await $(page.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();
    let step = page.stepFromSectionWithIdByIndex(sectionId,2);
    await expect(await $(step.content)).toBeDisplayedInViewport({message:'title is not visible on page'});
    await expect(await step.hasCustomContent()).toBe(true,'hasCustomContent should be true');
    await expect(await $(step.wizardStepContent)).toBeDisplayedInViewport({message:'wizardStepContent is not visible on page'});
    step1 = page.stepFromSectionWithIdByIndex(sectionId,1);
    await expect(await $(step.dataE2E)).toBeDisplayedInViewport({message:'Wizard step by index "2" is not visible on page'});
    await expect(await $(step1.dataE2E)).not.toBeDisplayedInViewport({message:'Wizard step by index "1" is visible on page'});
    await (await $(page.stepsFromSectionWithIdByIndex(sectionId,1).wizardStepsStepByIndex(1).bulletItemIcon)).click();
    await expect(await $(step.dataE2E)).not.toBeDisplayedInViewport({message:'Wizard step by index "2" is visible on page'});
    await expect(await $(step1.dataE2E)).toBeDisplayedInViewport({message:'Wizard step by index "1" is not visible on page'});
  });
  it('should verify the ux-wizard-steps CO methods: wizardStepsStepCO, content, wizardStepCO ', async () => {
    browser.addTestMeta({zephyrStep: "400665"});
    let sectionId= 'Default';
    let scrollIntoSection = await $(page.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();
    let steps = page.stepsByIndex(1);
    await expect(await $(steps.dataE2E)).toBeDisplayedInViewport({message:'dataE2E is not visible on page'});
    await expect(await $(steps.wizardStepsStepCO.currentPath)).toBeDisplayedInViewport({message:'wizardStepsStepCO selector is not visible on page'});
    await expect(await $(steps.content)).toBeDisplayedInViewport({message:'content is not visible on page'});
    await expect(await $(steps.wizardStepCO.dataE2E)).toExist({message:'wizardStepCO dataE2E is not existing on page'});
  });
  it('should verify the ux-wizard-steps-step CO methods: isCompleted, isActive, isDisabled, isInvalid, isNavigationAllowed ', async () => {
    browser.addTestMeta({zephyrStep: "400667"});
    let sectionId= 'Default';
    let scrollIntoSection = await $(page.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();
    let steps = page.stepsByIndex(1);
    await expect(await steps.wizardStepsStepByIndex(1).isCompleted()).toBe(true,'isCompleted should be true');
    await expect(await steps.wizardStepsStepByIndex(2).isActive()).toBe(true,'isActive should be true');
    await expect(await steps.wizardStepsStepByIndex(3).isInvalid()).toBe(true,'isInvalid should be true');
    await expect(await steps.wizardStepsStepByIndex(4).isDisabled()).toBe(true,'isDisabled should be true');
    await expect(await steps.wizardStepsStepByIndex(4).isCompleted()).toBe(false,'isCompleted should be false');
    await expect(await steps.wizardStepsStepByIndex(4).isActive()).toBe(false,'isActive should be false');
    await expect(await steps.wizardStepsStepByIndex(4).isInvalid()).toBe(false,'isInvalid should be false');
    await expect(await steps.wizardStepsStepByIndex(4).isNavigationAllowed()).toBe(true,'isNavigationAllowed should be true');
    await (await $(page.buttonComponentByTextContains('Deactivate navigation').currentPath)).click();
    await expect(await steps.wizardStepsStepByIndex(4).isNavigationAllowed()).toBe(false,'isNavigationAllowed should be false');
  });
  it('should verify the ux-wizard-steps-step CO methods: currentMarker, markerIcon, indicator, bulletItem, bulletItemIcon ', async () => {
    browser.addTestMeta({zephyrStep: "400668"});
    let sectionId= 'Default';
    let scrollIntoSection = await $(page.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();
    let steps = page.stepsByIndex(1);
    await expect(await $(steps.wizardStepsStepByIndex(2).currentMarker)).toBeDisplayedInViewport({message:'currentMarker is not visible on page'});
    await expect(await $(steps.wizardStepsStepByIndex(1).indicator)).toBeDisplayedInViewport({message:'indicator is not visible on page'});
    await expect(await $(steps.wizardStepsStepByIndex(1).bulletItem)).toBeDisplayedInViewport({message:'bulletItem is not visible on page'});
    await expect(await $(steps.wizardStepsStepByIndex(1).bulletItemIcon)).toBeDisplayedInViewport({message:'bulletItemIcon is not visible on page'});
  });
  it('should verify the ux-wizard-steps-step CO methods: isCompletedIcon, isInvalidIcon, isActiveIcon ', async () => {
    browser.addTestMeta({zephyrStep: "400669"});
    let sectionId= 'Default';
    let scrollIntoSection = await $(page.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();
    let steps = page.stepsByIndex(1);
    await expect(await steps.wizardStepsStepByIndex(1).isCompletedIcon()).toBe(true,'isCompletedIcon should be true');
    await expect(await steps.wizardStepsStepByIndex(2).isActiveIcon()).toBe(true,'isActiveIcon should be true');
    await expect(await steps.wizardStepsStepByIndex(3).isInvalidIcon()).toBe(true,'isInvalidIcon should be true');
    await expect(await steps.wizardStepsStepByIndex(1).isActiveIcon()).toBe(false,'isActiveIcon should be false');
    await expect(await steps.wizardStepsStepByIndex(1).isInvalidIcon()).toBe(false,'isInvalidIcon should be false');
  });
  it('should verify the ux-wizard-steps-step CO methods: bulletItemIconSpan, hasBulletItemIconSpan ', async () => {
    browser.addTestMeta({zephyrStep: "400670"});
    let sectionId= 'remote-navigation';
    let scrollIntoSection = await $(page.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();
    let steps = page.stepsFromSectionById(sectionId);
    await expect(await $(steps.wizardStepsStepByIndex(2).bulletItemIcon)).toBeDisplayedInViewport({message:'bulletItemIcon is not visible on page'});
    await expect(await steps.wizardStepsStepByIndex(2).hasBulletItemIconSpan()).toBe(true,'hasBulletItemIconSpan should be true');
    await expect(await steps.wizardStepsStepByIndex(1).hasBulletItemIconSpan()).toBe(false,'hasBulletItemIconSpan should be false');
  });
  it('should verify the ux-wizard-steps-step CO methods: labelWrapper, labelWrapperLabel, labelWrapperSublabel ', async () => {
    browser.addTestMeta({zephyrStep: "400673"});
    let sectionId= 'Default';
    let scrollIntoSection = await $(page.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();
    let steps = page.stepsFromSectionById(sectionId);
    await expect(await $(steps.wizardStepsStepByIndex(1).labelWrapper)).toBeDisplayedInViewport({message:'labelWrapper is not visible on page'});
    await expect(await $(steps.wizardStepsStepByIndex(1).labelWrapperLabel)).toBeDisplayedInViewport({message:'labelWrapperLabel is not visible on page'});
    await expect(await $(steps.wizardStepsStepByIndex(1).labelWrapperSublabel)).toBeDisplayedInViewport({message:'labelWrapperSublabel is not visible on page'});
  });
  it('should verify remote navigation ', async () => {
    browser.addTestMeta({zephyrStep: "400674"});
    let sectionId= 'remote-navigation';
    let scrollIntoSection = await $(page.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();
    let steps = page.stepsFromSectionWithIdByIndex(sectionId,1);
    await expect(await $(steps.wizardStepsStepByIndex(1).currentMarker)).toBeDisplayedInViewport({message:'currentMarker  step by index 1 is not visible on page'});
    await expect(await steps.wizardStepsStepByIndex(1).isActive()).toBe(true,'isActive should be true');
    await expect(await $(steps.wizardStepsStepByIndex(2).currentMarker)).not.toBeDisplayedInViewport({message:'currentMarker step by index 2 is visible on page'});
    await expect(await steps.wizardStepsStepByIndex(2).isActive()).toBe(false,'isActive should be false');
    await (await $(page.buttonComponentByTextContains('Next').currentPath)).click();
    await expect(await $(steps.wizardStepsStepByIndex(1).currentMarker)).not.toBeDisplayedInViewport({message:'currentMarker  step by index 1 is visible on page'});
    await expect(await steps.wizardStepsStepByIndex(1).isActive()).toBe(false,'isActive should be false');
    await expect(await $(steps.wizardStepsStepByIndex(2).currentMarker)).toBeDisplayedInViewport({message:'currentMarker step by index 2 is not visible on page'});
    await expect(await steps.wizardStepsStepByIndex(2).isActive()).toBe(true,'isActive should be true');
  });
});
