import Routing from '../../../../pages/eui/10x/routing-10x.js'
import CookieBannerActions from '../../../../actions/cookieBanner.js'
import FormGroupPage from '../../../../pages/eui/10x/ux/ux-form-group-10x.po.js'


describe('eUI - <ux-form-group> Component Object', async () => {
  let formGroupPage = new FormGroupPage();
  it('should navigate to <ux-form-group> component', async () => {
    browser.addTestMeta({uuid:"6fee1404-9c64-11eb-a8b3-0242ac130003", zephyrKey: "CCQA-988", zephyrStep: "316148", reportGroups: ["eUI.10x.ux"]});
    await formGroupPage.open(Routing.getUxComponentUrl('ux-form-group'));
    await CookieBannerActions.cookieBanner(true);
    let pgTitle = await $(formGroupPage.pageTitle);
    let appDocPageId = await $(formGroupPage.appDocPageById('ux-form-group'));
    let navigationList = await $(formGroupPage.navigationList);

    await expect(pgTitle).toBeDisplayed({wait:1000, message:'<ux-form-group> page title is not visible on page'});
    await expect(pgTitle).toHaveText('ux-form-group', {wait: 1000, message: '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 of the Component on the page ', async () => {
    browser.addTestMeta({zephyrStep: "316156"});
    let sectionId = 'Default';
    let scrollIntoSection = await $(formGroupPage.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();
    let form = formGroupPage.formGroupByIndex(2);
    await expect(await $(form.dataE2E)).toBeDisplayedInViewport({message:'Form group by index 1 is not visible on page'});
    await expect(await $(formGroupPage.formGroupByTextContains('This is the label').dataE2E)).
      toBeDisplayedInViewport({message:'Form group by text "This is the label" is not visible on page'});
    await expect(await $(formGroupPage.formGroupByTextEqualsAndIndex('This is the label', 1).dataE2E)).
     toBeDisplayedInViewport({message:'Form group by text "This is the label" and index 1 is not visible on page'});
    await expect(await $$(form.byDefault().dataE2E)).toBeElementsArrayOfSize(86);
  });
  it('should verify component elements ', async () => {
    browser.addTestMeta({zephyrStep: "316149"});
    let sectionId = 'Default';
    let scrollIntoSection = await $(formGroupPage.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();

    let form = formGroupPage.formGroupByIndex(2);
    await expect(await $(form.dataE2E)).
      toBeDisplayedInViewport({message:'Form group dataE2E from Default section is not visible on page'});
    await expect(await $(form.formGroupLabelWrapper)).
      toBeDisplayedInViewport({message:'Form group formGroupLabelWrapper from Default section is not visible on page'});
    await expect(await $(form.formGroupLabel)).
      toBeDisplayedInViewport({message:'Form group formGroupLabel from Default section is not visible on page'});
    form = formGroupPage.formGroupByIndex(5);
    await (await $(form.currentPath)).scrollIntoView();
    await expect(await $(form.requiredIndicator)).
      toBeDisplayedInViewport({message:'Form group requiredIndicator from Default section is not visible on page'});
    form = formGroupPage.formGroupByIndex(7);
    await (await $(form.currentPath)).scrollIntoView();
    await expect(await $(form.infoLabel)).
      toBeDisplayedInViewport({message:'Form group infoLabel is not visible on page'});
    await expect(await $(form.inputContent)).
      toBeDisplayedInViewport({message:'Form group inputContent is not visible on page'});
    form = formGroupPage.formGroupByIndex(9);
    await (await $(form.currentPath)).scrollIntoView();
    await expect(await $(form.loadingIndicator)).toBeDisplayedInViewport({message:'Form group loadingIndicator is not visible on page'});

    sectionId = 'misc-options';
    scrollIntoSection = await $(formGroupPage.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();

    form = formGroupPage.formGroupFromSectionWithIdByIndex(sectionId,2);
    await expect(await $(form.customSubContent)).toBeDisplayedInViewport({message:'Form group customSubContent is not visible on page'});
    await expect(await $(form.customSubContentPlaceholder)).toBeDisplayedInViewport({message:'Form group customSubContentPlaceholder is not visible on page'});
    await expect(await form.hasCustomSubContent()).toBe(true,'hasCustomSubContent should be true');

    form = formGroupPage.formGroupFromSectionWithIdByIndex(sectionId,3);
    await expect(await $(form.formGroupLeftTitleContentPlaceholder)).
      toBeDisplayedInViewport({message:'Form group formGroupLeftTitleContentPlaceholder is not visible on page'});

  });
  it('should verify component boolean property ', async () => {
    browser.addTestMeta({zephyrStep: "316150"});
    let sectionId= 'feedbackType';
    let scrollIntoSection = await $(formGroupPage.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();

    let form = formGroupPage.formGroupFromSectionWithIdByIndex(sectionId,5);
    await expect(await $(form.dataE2E)).toBeDisplayedInViewport({message:'Form group dataE2E is not visible on page'});
    await expect(await form.hasDanger()).toBe(true,'hasDanger should be true');
    await expect(await form.hasLabel()).toBe(true,'hasLabel should be true');
    await expect(await form.isVertical()).toBe(false,'isVertical should be false');
    await expect(await form.isRequired()).toBe(false,'isRequired should be false');

    sectionId= 'Default';
    scrollIntoSection = await $(formGroupPage.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();

    form = formGroupPage.formGroupFromSectionWithIdByIndex(sectionId,5);
    await (await $(form.currentPath)).scrollIntoView();
    await expect(await $(form.requiredIndicator)).toBeDisplayedInViewport({message:
      'Form group requiredIndicator from Default section is not visible on page'});
    await expect(await form.isRequired()).toBe(true,'isRequired should be true');
    await expect(await form.hasDanger()).toBe(false,'hasDanger should be false');
    await expect(await form.hasInfoLabel()).toBe(false,'hasInfoLabel should be false');
    await expect(await form.hasValidationErrorMessage()).toBe(false,'hasValidationErrorMessage should be false');
    await expect(await form.isValid()).toBe(true,'isValid should be true');

    form = formGroupPage.formGroupFromSectionWithIdByIndex(sectionId,6);
    await (await $(form.currentPath)).scrollIntoView();
    await expect(await $(form.requiredIndicator)).toBeDisplayedInViewport({message:
      'Form group requiredIndicator from Default section is not visible on page'});
    await expect(await form.isRequired()).toBe(true,'isRequired should be true');
    form = formGroupPage.formGroupFromSectionWithIdByIndex(sectionId,7);
    await (await $(form.currentPath)).scrollIntoView();
    await expect(await $(form.infoLabel)).toBeDisplayedInViewport({message:'Form group infoLabel is not visible on page'});
    await expect(await form.hasInfoLabel()).toBe(true,'hasInfoLabel should be true');
    await expect(await form.hasCursorHelp()).toBe(true,'hasCursorHelp should be true');
    form = formGroupPage.formGroupFromSectionWithIdByIndex(sectionId,9);
    await (await $(form.currentPath)).scrollIntoView();
    await expect(await $(form.loadingIndicator)).toBeDisplayedInViewport({message:'Form group loadingIndicator is not visible on page'});
    await expect(await form.isLoadingIndicatorActive()).toBe(true,'isLoadingIndicatorActive should be true');

    sectionId = 'misc-options';
    scrollIntoSection = await $(formGroupPage.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();

    form = formGroupPage.formGroupFromSectionWithIdByIndex(sectionId,1);
    await (await $(form.currentPath)).scrollIntoView();
    await expect(await $(form.inputContent)).toBeDisplayedInViewport({message:
      'Form group inputContent from Default section is not visible on page'});
    await expect(await form.isReadOnly()).toBe(true,'isReadOnly should be true');
  });
  it('should verify stateClass ', async () => {
    browser.addTestMeta({zephyrStep: "389594"});
    let sectionId= 'Default';
    let scrollIntoSection = await $(formGroupPage.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();

    let form = formGroupPage.formGroupByIndex(2);
    await expect(await $(form.dataE2E)).toBeDisplayedInViewport({message:'Form group dataE2E from Default section is not visible on page'});
    await expect(await form.hasRow()).toBe(true,'hasRow should be true');

    sectionId = 'radio';
    scrollIntoSection = await $(formGroupPage.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();

    form = formGroupPage.formGroupFromSectionWithIdByIndex(sectionId,6);
    await (await $(form.currentPath)).scrollIntoView();
    await expect(await $(form.dataE2E)).toBeDisplayedInViewport({message:
      'Form group dataE2E from Default section is not visible on page'});
    await expect(await form.isInline()).toBe(true,'isInline should be true');

    sectionId= 'vertical-layout';
    scrollIntoSection = await $(formGroupPage.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();

    form = formGroupPage.formGroupFromSectionWithIdByIndex(sectionId,1);
    await (await $(form.currentPath)).scrollIntoView();
    await expect(await $(form.dataE2E)).toBeDisplayedInViewport({message:'Form group dataE2E from Default section is not visible on page'});
    await expect(await form.isVertical()).toBe(true,'isVertical should be true');
    await expect(await form.hasLabel()).toBe(true,'hasLabel should be true');

    form = formGroupPage.formGroupFromSectionWithIdByIndex(sectionId,3);
    await (await $(form.currentPath)).scrollIntoView();
    await expect(await $(form.dataE2E)).toBeDisplayedInViewport({message:'Form group dataE2E from Default section is not visible on page'});
    await expect(await form.hasLabel()).toBe(false,'hasLabel should be false');

    sectionId = 'compact';
    scrollIntoSection = await $(formGroupPage.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();

    form = formGroupPage.formGroupFromSectionWithIdByIndex(sectionId,1);
    await (await $(form.currentPath)).scrollIntoView();
    let toggle = await $('//docpagesamples//mat-slide-toggle//div[@class="mat-slide-toggle-thumb"]');
    await browser.execute("arguments[0].click();" , toggle);
    await expect(await $(form.dataE2E)).toBeDisplayedInViewport({message:'Form group dataE2E from Default section is not visible on page'});
    await expect(await form.isCompact()).toBe(true,'isCompact should be true');

    toggle = await $('(//docpagesamples//mat-slide-toggle//div[@class="mat-slide-toggle-thumb"])[2]');
    await browser.execute("arguments[0].click();" , toggle);
    await expect(await $(form.dataE2E)).toBeDisplayedInViewport({message:'Form group dataE2E from Default section is not visible on page'});
  });
  it('should verify controlFeedbackCO ', async () => {
    browser.addTestMeta({zephyrStep: "389595"});
    let sectionId = 'feedbackType';
    let scrollIntoSection = await $(formGroupPage.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();

    let form = formGroupPage.formGroupFromSectionWithIdByIndex(sectionId,1);
    await expect(await $(form.inputContent)).
      toBeDisplayedInViewport({message:'Form group inputContent from feedbackType section is not visible on page'});
    await expect(await $(form.controlFeedbackCO.currentPath)).
      toBeDisplayedInViewport({message:'Form group controlFeedbackCO.currentpath from feedbackType section is not visible on page'});
    await expect(await form.hasControlFeedback()).toBe(true,'hasControlFeedback should be true');
  });
  it('should verify feedbacktypeclass, iconClass', async () => {
    browser.addTestMeta({zephyrStep: "389978"});
    let sectionId= 'feedbackType';
    let scrollIntoSection = await $(formGroupPage.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();

    let form = formGroupPage.formGroupFromSectionWithIdByIndex(sectionId,1);
    await expect(await $(form.dataE2E)).
      toBeDisplayedInViewport({message:'Form group dataE2E from feedbackType section is not visible on page'});

    await expect(await (await $(formGroupPage.formGroupFromSectionWithIdByIndex(sectionId,1).currentPath)).getAttribute('feedbacktypeclass')).toContain('secondary');
    await expect(await (await $(formGroupPage.formGroupFromSectionWithIdByIndex(sectionId,2).currentPath)).getAttribute('feedbacktypeclass')).toContain('info');
    await expect(await (await $(formGroupPage.formGroupFromSectionWithIdByIndex(sectionId,3).currentPath)).getAttribute('feedbacktypeclass')).toContain('success');
    await expect(await (await $(formGroupPage.formGroupFromSectionWithIdByIndex(sectionId,4).currentPath)).getAttribute('feedbacktypeclass')).toContain('warning');
    await expect(await (await $(formGroupPage.formGroupFromSectionWithIdByIndex(sectionId,5).currentPath)).getAttribute('feedbacktypeclass')).toContain('danger');

    sectionId= 'Default';
    scrollIntoSection = await $(formGroupPage.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();

    form = formGroupPage.formGroupFromSectionWithIdByIndex(sectionId,7);
    await (await $(form.currentPath)).scrollIntoView();

    await expect(await (await $(formGroupPage.formGroupFromSectionWithIdByIndex(sectionId,8).currentPath)).getAttribute('iconclass')).toContain('eui-icon-person');
    await expect(await (await $(formGroupPage.formGroupFromSectionWithIdByIndex(sectionId,9).currentPath)).getAttribute('iconclass')).toContain('eui-icon-question');

  });
});
