import Routing from '../../../../pages/eui/10x/routing-10x.js'
import CookieBannerActions from '../../../../actions/cookieBanner.js'
import PanelPage from '../../../../pages/eui/10x/ux/ux-panel-10x.po.js'

describe('eUI - <ux-panel> component object', async () => {
  let panelPage = new PanelPage();
  it('should navigate to <ux-panel> component', async () => {
    browser.addTestMeta({uuid:"2289db5c-92e2-11eb-a8b3-0242ac130003", zephyrKey: "CCQA-741", zephyrStep: "363996", reportGroups: ["eUI.10x.ux"]});
    await panelPage.open(Routing.getUxComponentUrl('ux-panel'));
    await CookieBannerActions.cookieBanner(true);
    let pgTitle = await $(panelPage.pageTitle);
    let appDocPageId = await $(panelPage.appDocPageById('ux-panel'));
    let navigationList = await $(panelPage.navigationList);

   await expect(pgTitle).toBeDisplayed({wait:1000, message:'<ux-panel> page title is not visible on page'});
   await expect(pgTitle).toHaveText('ux-panel', {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 component object on page', async () => {
    browser.addTestMeta({zephyrStep: "363997"});
    let sectionId= 'Default';
    let scrollIntoSection = await $(panelPage.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();
    let panel= panelPage.panelByIndex(1);
    await expect(await $(panel.dataE2E)).toBeDisplayedInViewport({message:'Panel by index 1 is not visible on page'});
    await expect(await $(panelPage.panelByTextContains('Label').dataE2E)).toBeDisplayedInViewport({message:'Panel by text "Label" is not visible on page'});
    await expect(await $(panelPage.panelByTextEqualsAndIndex('Label', 1).dataE2E)).
     toBeDisplayedInViewport({message:'Panel by text "Label" and index 1 is not visible on page'});
    await expect(await $$(panel.byDefault().dataE2E)).toBeElementsArrayOfSize(145);
  });
  it('hould verify the panel CO elements and methods ', async () => {
    browser.addTestMeta({zephyrStep: "363998"});
    let sectionId= 'Default';
    let scrollIntoSection = await $(panelPage.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();

    let panel= panelPage.panelByIndex(1);
    await expect(await $(panel.dataE2E)).toBeDisplayedInViewport({message:'Panel dataE2E from Default section is not visible on page'});
    await expect(await $(panel.panelItem)).toBeDisplayedInViewport({message:'Panel panelItem from Default section is not visible on page'});
    await expect(await $(panel.panelHeader)).toBeDisplayedInViewport({message:'Panel panelHeader from Default section is not visible on page'});
    await expect(await $(panel.labelCO.currentPath)).toBeDisplayedInViewport({message:'Panel panel.labelCO.currentPath from Default section is not visible on page'});
    await expect(await $(panel.labelCO.labelContentLabel)).toBeDisplayedInViewport({message:'Panel panel.labelCO.labelContentLabel from Default section is not visible on page'});
    await expect(await $(panel.labelCO.labelContentLabel)).toHaveText('Label');
    await expect(await $(panel.panelContent)).toBeDisplayedInViewport({message:'Panel panelContent from Default section is not visible on page'});
    await expect(await $(panel.panelContent)).toHaveText('Panel content');
   });

  it('should verify the CO isExpandable, isCollapsible , isCollapsed, isVisible methods ', async () => {
    browser.addTestMeta({zephyrStep: "363999"});
    let sectionId= 'Default';
    let scrollIntoSection = await $(panelPage.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();

    let panel= panelPage.panelByIndex(1);
    await expect(await panel.isCollapsible()).toBe(false,'isCollapsible should be false');
    await expect(await panel.isExpandable()).toBe(false,'isCollapsible should be false');
    await expect(await panel.isVisible()).toBe(true,'isVisible should be true');
    await expect(await panel.hasTag()).toBe(true,'hasTag should be true');
    await expect(await panel.isHidden()).toBe(false,'isHidden should be false');
    await expect(await panel.hasCustomPanelFooter()).toBe(false,'hasCustomPanelFooter should be false');
    panel = panelPage.panelByIndex(3);
    await expect(await panel.isCollapsible()).toBe(true,'isCollapsible should be true');
    await expect(await panel.isCollapsed()).toBe(false,'isCollapsed should be false');
    await expect(await $(panel.toggleButtonIcon)).toBeDisplayedInViewport({message:'Panel toggleButtonIcon from Default section is not visible on page'});
    await (await $(panel.toggleButtonIcon)).click();
    await expect(await panel.isCollapsed()).toBe(true,'isCollapsed should be true');
    panel = panelPage.panelByIndex(2);
    await expect(await panel.isExpandable()).toBe(true,'isExpandable should be true');
    await expect(await panel.isExpanded()).toBe(false,'isExpanded should be false');
    panel = panelPage.panelByIndex(4);
    await expect(await panel.isExpanded()).toBe(true,'isExpanded should be true');
    await expect(await panel.isExpandedRightContentExpandToggleIcon()).toBe(true,'isExpandedRightContentExpandToggleIcon should be true');
    panel = panelPage.panelByIndex(6);
    await (await $(panel.currentPath)).scrollIntoView();
    await expect(await panel.isHidden()).toBe(true,'isHidden should be true');
    await expect(await panel.hasStatusIndicatorHeaderIcon()).toBe(false,'hasStatusIndicatorHeaderIcon should be false');
   });

   it('should verify the Panel CO Status indicator method ', async () => {
    browser.addTestMeta({zephyrStep: "364000"});
    let sectionId= 'status-indicator';
    let scrollIntoSection = await $(panelPage.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();

    let panel= panelPage.panelFromSectionWithIdByIndex(sectionId,7);
    await (await $(panel.currentPath)).scrollIntoView();
    await expect(await $(panel.statusIndicator)).
      toBeDisplayedInViewport({message:'Panel statusIndicatorPlaceholder from status-indicator section is not visible on page'});
    await expect(await $(panel.statusIndicatorIcon)).
      toBeDisplayedInViewport({message:'Panel statusIndicatorIconPlaceholder from status-indicator section is not visible on page'});
    await expect(await panel.hasStatusIndicatorHeaderIcon()).toBe(true,'hasStatusIndicatorHeaderIcon should be true');
   });

   it('should verify the Panel CO -> Panel Right Content and Panel Sub Header methods ', async () => {
    browser.addTestMeta({zephyrStep: "364001"});
    let sectionId= 'header-options';
    let scrollIntoSection = await $(panelPage.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();

    let panel= panelPage.panelFromSectionWithIdByIndex(sectionId,9);
    await (await $(panel.currentPath)).scrollIntoView();
    await expect(await $(panel.panelHeaderRightContent)).
      toBeDisplayedInViewport({message:'Panel panelHeaderRightContent from header-options section is not visible on page'});
    await expect(await $(panel.panelRightContentPlaceholder)).
      toBeDisplayedInViewport({message:'Panel panelRightContentPlaceholder from header-options section is not visible on page'});
    await expect(await panel.hasCustomPanelHeaderRightContent()).toBe(true,'hasCustomPanelHeaderRightContent should be true');
    await expect(await panel.hasPanelHeader()).toBe(true,'hasPanelHeader should be true');


    panel = panelPage.panelFromSectionWithIdByIndex(sectionId,12);
    await (await $(panel.currentPath)).scrollIntoView();

    await expect(await $(panel.panelSubHeaderPlaceholder)).toBeDisplayedInViewport({message:'Panel panelSubHeaderPlaceholder  from header-options section is not visible on page'});
    await expect(await panel.hasCustomSubHeaderContent()).toBe(true,'hasCustomSubHeaderContent should be true');
    await expect(await panel.hasStatusIndicator()).toBe(false,'hasStatusIndicator should be false');
   });

   it('should verify the Panel CO -> Indicator methods ', async () => {
    browser.addTestMeta({zephyrStep: "364002"});
    let sectionId= 'status-indicator';
    let scrollIntoSection = await $(panelPage.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();

    let panel= panelPage.panelFromSectionWithIdByIndex(sectionId,1);
    await (await $(panel.currentPath)).scrollIntoView();
    await expect(await $(panel.statusIndicatorWrapper)).
      toBeDisplayedInViewport({message:'Panel indicatorWrapper from status-indicator section is not visible on page'});
    await expect(await panel.hasStatusIndicator()).toBe(true,'hasStatusIndicator should be true');
    await expect(await $(panel.indicatorWrapperLabel)).
      toBeDisplayedInViewport({message:'Panel indicatorWrapperLabel from status-indicator section is not visible on page'});
    await expect(await $(panel.indicatorWrapperLabel)).toHaveText('Status indicator default message');
    await expect(await $(panel.indicatorWrapperToggle)).
      toBeDisplayedInViewport({message:'Panel indicatorWrapperToggle from status-indicator section is not visible on page'});
    await expect(await panel.isTogglableStatusIndicatorContent()).toBe(true,'isTogglableStatusIndicatorContent should be true');
    await expect(await $(panel.indicatorWrapperIcon)).
      toBeDisplayedInViewport({message:'Panel indicatorWrapperIcon from status-indicator section is not visible on page'});
    await (await $(panel.indicatorWrapperIcon)).click();
    await expect(await $(panel.indicatorContentPlaceholder)).
      toBeDisplayedInViewport({message:'Panel indicatorContentPlaceholder from status-indicator section is not visible on page'});
    await expect(await panel.isStatusIndicatorContentExpanded()).toBe(true,'isStatusIndicatorContentExpanded should be true');
    await expect(await panel.hasCustomSubHeaderContent()).toBe(false,'hasCustomSubHeaderContent should be false');
   });

   it('should verify the Panel CO -> Footer method ', async () => {
    browser.addTestMeta({zephyrStep: "364007"});
    let sectionId= 'custom-footer';
    let scrollIntoSection = await $(panelPage.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();

    let panel= panelPage.panelFromSectionWithIdByIndex(sectionId,2);
    await (await $(panel.currentPath)).scrollIntoView();
    await expect(await $(panel.panelFooterDiv)).
      toBeDisplayedInViewport({message:'Panel panelFooterDiv from custom-footer section is not visible on page'});
    await expect(await $(panel.customPanelFooterPlaceholder)).
      toBeDisplayedInViewport({message:'Panel customPanelFooterPlaceholder from custom-footer section is not visible on page'});
    await expect(await panel.hasCustomPanelFooter()).toBe(true,'hasCustomPanelFooter should be true');
    await expect(await panel.isLargeFooter()).toBe(false,'isLargeFooter should be false');
    await expect(await panel.hasCustomPanelFooterWithDescendants()).toBe(false,'hasCustomPanelFooterWithDescendants should be false');
    await expect(await panel.isTogglableStatusIndicatorContent()).toBe(false,'isTogglableStatusIndicatorContent should be false');
    await expect(await panel.isStatusIndicatorContentExpanded()).toBe(false,'isStatusIndicatorContentExpanded should be false');
    await expect(await panel.isBlocked()).toBe(false,'isBlocked should be false');
   });

   it('should verify the Panel CO -> Content Blocked Overlay method ', async () => {
    browser.addTestMeta({zephyrStep: "364009"});
    let sectionId= 'misc-options';
    let scrollIntoSection = await $(panelPage.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();

    let panel = panelPage.panelFromSectionWithIdByIndex(sectionId,14);
    await (await $(panel.currentPath)).scrollIntoView();
    await (await $(panelPage.buttonComponentByTextContains('Toggle panel blocker').currentPath)).click();
    panel= panelPage.panelFromSectionById(sectionId);
    await expect(await $(panel.contentBlockedOverlay)).
      toBeDisplayedInViewport({message:'Panel contentBlockedOverlay from misc-options section is not visible on page'});
    await expect(await panel.isBlocked()).toBe(true,'isBlocked should be true');
   });

   it('should verify boolean properties ', async () => {
    browser.addTestMeta({zephyrStep: "389470"});
    let sectionId= 'header-options';
    let scrollIntoSection = await $(panelPage.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();

    let panel= panelPage.panelFromSectionWithIdByIndex(sectionId,8);
    await (await $(panel.currentPath)).scrollIntoView();
    await expect(await $(panel.panelHeaderPlaceholder)).
      toBeDisplayedInViewport({message:'Panel panelHeaderPlaceholder from header-options section is not visible on page'});
     await expect(await panel.hasCustonPanelHeader()).toBe(true,'hasCustonPanelHeader should be true');


    panel= panelPage.panelFromSectionWithIdByIndex(sectionId,9);
    await (await $(panel.currentPath)).scrollIntoView();
    await expect(await $(panel.panelRightContentPlaceholder)).
     toBeDisplayedInViewport({message:'Panel panelRightContentPlaceholder from header-options section is not visible on page'});
    await expect(await panel.hasCustomPanelHeaderRightContent()).toBe(true,'hasCustomPanelHeaderRightContent should be true');
    await expect(await panel.hasCustomPanelHeaderRightContentWithDescendants()).toBe(false,'hasCustomPanelHeaderRightContentWithDescendants should be true');
    await expect(await panel.isAccordionExpanded()).toBe(false,'isAccordionExpanded should be false');

    sectionId= 'accordion';
    scrollIntoSection = await $(panelPage.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();

    panel= panelPage.panelFromSectionWithIdByIndex(sectionId,1);
    await (await $(panel.currentPath)).scrollIntoView();
    await expect(await $(panel.panelHeader)).
      toBeDisplayedInViewport({message:'Panel panelHeader from accordion section is not visible on page'});
    await expect(await panel.isAccordionExpanded()).toBe(true,'isAccordionExpanded should be true');
    await expect(await panel.hasCustonPanelHeader()).toBe(false,'hasCustonPanelHeader should be false');
    await expect(await panel.hasCustonPanelHeaderWithDescendants()).toBe(false,'hasCustonPanelHeaderWithDescendants should be false');
    await expect(await panel.hasPanelHeader()).toBe(true,'hasPanelHeader should be true');
    await expect(await panel.hasCustomPanelHeaderRightContent()).toBe(false,'hasCustomPanelHeaderRightContent should be false');

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

    panel= panelPage.panelFromSectionWithIdByIndex(sectionId,17);
    await (await $(panel.currentPath)).scrollIntoView();
    await expect(await $(panel.panelContent)).
      toBeDisplayedInViewport({message:'Panel panelContent from accordion section is not visible on page'});
    await expect(await panel.hasMaxHeight()).toBe(true,'hasMaxHeight should be true');
    await expect(await panel.hasContentScrollable()).toBe(true,'hasContentScrollable should be true');

    panel= panelPage.panelFromSectionWithIdByIndex(sectionId,18);
    await (await $(panel.currentPath)).scrollIntoView();
    await expect(await $(panel.panelContent)).toBeDisplayedInViewport({message:'Panel panelContent from accordion section is not visible on page'});
    await expect(await panel.hasActualMaxHeight()).toBe(true,'hasActualMaxHeight should be true');
    await expect(await panel.hasMaxHeight()).toBe(false,'hasMaxHeight should be false');
    await expect(await panel.hasContentScrollable()).toBe(false,'hasContentScrollable should be false');

    panel= panelPage.panelFromSectionWithIdByIndex(sectionId,16);
    await (await $(panel.currentPath)).scrollIntoView();
    await expect(await $(panel.panelContent)).toBeDisplayedInViewport({message:'Panel panelContent from accordion section is not visible on page'});
    await expect(await panel.isActualMaxHeightNone()).toBe(false,'isActualMaxHeightNone should be false');
    await expect(await panel.contentHeight()).toBe('max-height: 200px;');
   });

   it('should verify icons, tags and badges', async () => {
    browser.addTestMeta({zephyrStep: "390112"});
    let sectionId = 'icons';
    let scrollIntoSection = await $(panelPage.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();

    let panel = panelPage.panelFromSectionWithIdByIndex(sectionId,1);
    await (await $(panel.currentPath)).scrollIntoView();

    await expect(await $(panel.dataE2E)).toBeDisplayedInViewport({message:'Panel dataE2E from icon section is not visible on page'});

    await expect(await (await $(panelPage.panelFromSectionWithIdByIndex(sectionId,2).labelCO.iconCO.iconContent)).getAttribute('class')).toContain('primary');
    await expect(await (await $(panelPage.panelFromSectionWithIdByIndex(sectionId,3).labelCO.iconCO.iconContent)).getAttribute('class')).toContain('info');
    await expect(await (await $(panelPage.panelFromSectionWithIdByIndex(sectionId,4).labelCO.iconCO.iconContent)).getAttribute('class')).toContain('success');
    await expect(await (await $(panelPage.panelFromSectionWithIdByIndex(sectionId,5).labelCO.iconCO.iconContent)).getAttribute('class')).toContain('warning');
    await expect(await (await $(panelPage.panelFromSectionWithIdByIndex(sectionId,6).labelCO.iconCO.iconContent)).getAttribute('class')).toContain('danger');

    panel= panelPage.panelFromSectionWithIdByIndex(sectionId,7);
    await (await $(panel.currentPath)).scrollIntoView();
    await expect(await $(panel.dataE2E)).toBeDisplayedInViewport({message:'Panel dataE2E from icon section is not visible on page'});
    await expect(await panel.labelCO.iconCO.isRounded()).toBe(true);

    sectionId= 'tags';
    scrollIntoSection = await $(panelPage.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();

    panel= panelPage.panelFromSectionWithIdByIndex(sectionId,1);
    await (await $(panel.currentPath)).scrollIntoView();

    await expect(await $(panel.dataE2E)).toBeDisplayedInViewport({message:'Panel dataE2E from tags section is not visible on page'});

    await expect(await (await $(panelPage.panelFromSectionWithIdByIndex(sectionId,3).tagCO.tagLabel)).getAttribute('class')).toContain('primary');
    await expect(await (await $(panelPage.panelFromSectionWithIdByIndex(sectionId,4).tagCO.tagLabel)).getAttribute('class')).toContain('info');
    await expect(await (await $(panelPage.panelFromSectionWithIdByIndex(sectionId,5).tagCO.tagLabel)).getAttribute('class')).toContain('success');
    await expect(await (await $(panelPage.panelFromSectionWithIdByIndex(sectionId,6).tagCO.tagLabel)).getAttribute('class')).toContain('warning');
    await expect(await (await $(panelPage.panelFromSectionWithIdByIndex(sectionId,7).tagCO.tagLabel)).getAttribute('class')).toContain('danger');

    await expect(await $(panelPage.panelFromSectionWithIdByIndex(sectionId,7).tagCO.tagSubLabel)).toHaveTextContaining('10');

    sectionId= 'badges';
    scrollIntoSection = await $(panelPage.sectionById(sectionId));
    await scrollIntoSection.scrollIntoView();

    panel= panelPage.panelFromSectionWithIdByIndex(sectionId,1);
    await (await $(panel.currentPath)).scrollIntoView();

   await expect(await $(panel.dataE2E)).toBeDisplayedInViewport({message:'Panel dataE2E from badges section is not visible on page'});

   await expect(await (await $(panelPage.panelFromSectionWithIdByIndex(sectionId,2).labelCO.badgeCO.badgeDataSpan)).getAttribute('class')).toContain('default');
   await expect(await (await $(panelPage.panelFromSectionWithIdByIndex(sectionId,3).labelCO.badgeCO.badgeDataSpan)).getAttribute('class')).toContain('info');
   await expect(await (await $(panelPage.panelFromSectionWithIdByIndex(sectionId,4).labelCO.badgeCO.badgeDataSpan)).getAttribute('class')).toContain('success');
   await expect(await (await $(panelPage.panelFromSectionWithIdByIndex(sectionId,5).labelCO.badgeCO.badgeDataSpan)).getAttribute('class')).toContain('warning');
   await expect(await (await $(panelPage.panelFromSectionWithIdByIndex(sectionId,6).labelCO.badgeCO.badgeDataSpan)).getAttribute('class')).toContain('danger');
   });
});
