import Routing from '../../../../pages/eui/10x/routing-10x.js'
import CardPage from '../../../../pages/eui/10x/ux/ux-card-10x.po.js'
import CoUxBadge from '../../../../components/10x/ux/ux-badge.js'
import CoUxSwitch from '../../../../components/10x/ux/ux-switch.js'
import CookieBannerActions from '../../../../actions/cookieBanner.js'

describe('eUI - <ux-card> Component Object @CCQA-829', async() => {
  let page = new CardPage();
  it('should navigate to <ux-card> component', async() => {
    browser.addTestMeta({uuid:"9c9b4bb5-45ca-4ad2-8d6e-593c97019ca3", zephyrKey: "CCQA-829", zephyrStep: "371230", reportGroups: ["eUI.10x.ux"]});
    await page.open(Routing.getUxComponentUrl('ux-card'));
    await CookieBannerActions.cookieBanner(true);
    let pgTitle = await $(page.pageTitle);
    let appDocPageId = await $(page.appDocPageById('ux-card'));
    let navigationList = await $(page.navigationList);
    await pgTitle.scrollIntoView();
    await expect(pgTitle).toBeDisplayed({wait:1000, message:'<ux-card> page title is not visible on page'});
    await expect(pgTitle).toHaveText('ux-card', '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 <ux-card> identification methods', async() => {
    browser.addTestMeta({zephyrStep: "371231"});
    let sectionId = 'Default';
    let sectionElement = await $(page.sectionById(sectionId));
    await sectionElement.scrollIntoView();
    await expect(sectionElement).toBeDisplayedInViewport({message:'<' + sectionId + '> section -> is not visible on page'});
    let index = 26;
    let cardByIndex = await $(page.cardByIndex(index).currentPath);
    await expect(cardByIndex).toExist({message:'Card with index ' + index + ' not existing on page'});
    await cardByIndex.scrollIntoView();

    let textContent = 'this is the card content';
    let cardByTextContains = await $(page.cardByTextContains(textContent).currentPath);
    await expect(cardByTextContains).toExist({message:'Card containing text: ' + textContent + ' not existing on page'});
    await cardByTextContains.scrollIntoView();

    index = 2;
    let cardByTextAndIndex = await $(page.cardByTextEqualsAndIndex(textContent, index).currentPath);
    await expect(cardByTextAndIndex).toExist({message:'Card containing text: "' + textContent + '" and index: ' + index + 'not existing on page'});
    await cardByTextAndIndex.scrollIntoView();
  });
  it('should verify the <ux-card> header ActionLinks', async() => {
    browser.addTestMeta({zephyrStep: "371232"});
    let sectionId = 'actionsLinks';
    let sectionElement = await $(page.sectionById(sectionId));
    await sectionElement.scrollIntoView();
    await expect(sectionElement).toBeDisplayedInViewport({message:'<' + sectionId + '> section -> is not visible on page'});


    let card3 = page.cardFromSectionWithIdByIndex(sectionId, 1);
    await expect(await $(card3.headerRightContentLocalMenu)).toBeDisplayedInViewport({message:'CoUxCard - Header Right Content local menu is not visible'});
    await sectionElement.scrollIntoView();
    await expect(await card3.areActionsDisabled()).toBe(false);

    let uxDropDownBtn = await $(card3.headerRightContentLocalMenuDropdownButtonCo.currentPath);
    await expect(uxDropDownBtn).toBeDisplayedInViewport({message:'<uxDropDownBtn> is not visible'});
    await uxDropDownBtn.click();

    let dropDownMenuElement = await $(card3.headerRightContentLocalMenuDropdownButtonCo.matMenuCO.currentPath);
    await expect(dropDownMenuElement).toExist({message:'<uxDropDownButton> has no mat-menu'});

    let matMenu = page.matMenu;
    let menuItem1 = await $(matMenu.matMenuButtonById(1));
    await menuItem1.moveTo();
    await expect(menuItem1).toHaveText('link 1');
    let menuItem2 = await $(matMenu.matMenuButtonById(2));
    await menuItem2.moveTo();
    await expect(menuItem2).toHaveText('link 2');
    let menuItem3 = await $(matMenu.matMenuButtonById(3));
    await menuItem3.moveTo();
    await expect(menuItem3).toHaveText('disabled link');
    let menuItem4 = await $(matMenu.matMenuButtonById(4));
    await menuItem4.moveTo();
    await expect(menuItem4).toHaveText('link 4');
    await menuItem1.click();
  });
  it('should verify the <ux-card> title', async() => {
    browser.addTestMeta({zephyrStep: "371233"});
    let sectionId = 'content-uxCardTitle';
    let sectionElement = await $(page.sectionById(sectionId));
    await sectionElement.scrollIntoView();
    await expect(sectionElement).toBeDisplayedInViewport({message:'<' + sectionId + '> section -> is not displayed on page'});

    let card4 = page.cardFromSectionWithIdByIndex(sectionId, 1);
    await expect(await $(card4.header)).toBeDisplayedInViewport({message:'CoUxCard - Header is not visible'});
    await expect(await $(card4.headerTitleMain)).toHaveText('Title');
  });
  it('should verify the <ux-card> subtitle', async() => {
    browser.addTestMeta({zephyrStep: "371234"});
    let sectionId = 'content-uxCardSubTitle';
    let sectionElement = await $(page.sectionById(sectionId));
    await sectionElement.scrollIntoView();
    await expect(sectionElement).toBeDisplayedInViewport({message:'<' + sectionId + '> section -> is not displayed on page'});

    let card5 = page.cardFromSectionWithIdByIndex(sectionId, 1);
    await expect(await $(card5.headerTitleMain)).toHaveText('Title');
    await expect(await $(card5.headerTitleSub)).toHaveText('Sub title');
  });
  it('should verify the <ux-card> without body @371235', async() => {
    browser.addTestMeta({zephyrStep: "371235"});
    let sectionId = 'content-empty';
    let sectionElement = await $(page.sectionById(sectionId));
    await sectionElement.scrollIntoView();
    await expect(sectionElement).toBeDisplayedInViewport({message:'<' + sectionId + '> section -> is not displayed on page'});
    await expect(await $(page.cardFromSectionWithIdByIndex(sectionId, 1).body)).toHaveAttrContaining('class', 'ux-card__body--no-content');
  });
  it('should verify the <ux-card> header status badge', async() => {
    browser.addTestMeta({zephyrStep: "371236"});
    let sectionId = 'status';
    let sectionElement = await $(page.sectionById(sectionId));
    await sectionElement.scrollIntoView();
    await expect(sectionElement).toBeDisplayedInViewport({message:'<' + sectionId + '> section -> is not displayed on page'});

    let badge = page.cardFromSectionWithIdByIndex(sectionId, 1).headerRightContentStatusBadgeCo;
    await expect(await badge.isPill()).toBe(true);
    await expect(await badge.isSmall()).toBe(true);
    await expect(await $(badge.currentPath)).toHaveText('DRAFT');
  });
  it('should verify the <ux-card> typeClass', async() => {
    browser.addTestMeta({zephyrStep: "371237"});
    let sectionId = 'status-statusTypeClass';
    let sectionElement = await $(page.sectionById(sectionId));
    await sectionElement.scrollIntoView();
    await expect(sectionElement).toBeDisplayedInViewport({message:'<' + sectionId + '> section -> is not displayed on page'});

    await expect(await $(page.cardFromSectionWithIdByIndex(sectionId, 1).currentPath)).toHaveAttrContaining('statustypeclass', 'primary');
    await expect(await $(page.cardFromSectionWithIdByIndex(sectionId, 2).currentPath)).toHaveAttrContaining('statustypeclass', 'secondary');
    await expect(await $(page.cardFromSectionWithIdByIndex(sectionId, 3).currentPath)).toHaveAttrContaining('statustypeclass', 'info');
    await expect(await $(page.cardFromSectionWithIdByIndex(sectionId, 4).currentPath)).toHaveAttrContaining('statustypeclass', 'success');
    await expect(await $(page.cardFromSectionWithIdByIndex(sectionId, 5).currentPath)).toHaveAttrContaining('statustypeclass', 'warning');
    await expect(await $(page.cardFromSectionWithIdByIndex(sectionId, 6).currentPath)).toHaveAttrContaining('statustypeclass', 'danger');
    await expect(await $(page.cardFromSectionWithIdByIndex(sectionId, 7).currentPath)).toHaveAttrContaining('statustypeclass', 'accent');

  });
  it('should verify the <ux-card> with collapsable body', async() => {
    browser.addTestMeta({zephyrStep: "371238"});
    let sectionId = 'isCollapsible-isCollapsed';
    let sectionElement = await $(page.sectionById(sectionId));
    await sectionElement.scrollIntoView();
    await expect(sectionElement).toBeDisplayedInViewport({message:'<' + sectionId + '> section -> is not displayed on page'});


    let card15 = page.cardFromSectionWithIdByIndex(sectionId, 1);
    await expect(await card15.isCollapsible()).toBe(true);
    await expect(await card15.isCollapsed()).toBe(false);
    await (await $(card15.expandToggle)).click();
    await expect(await card15.isCollapsed()).toBe(true);
    await (await $(card15.expandToggle)).click();
    await expect(await card15.isCollapsed()).toBe(false);

    let card16 = page.cardFromSectionWithIdByIndex(sectionId, 2);
    await expect(await card16.isCollapsible()).toBe(true);
    await expect(await card16.isCollapsed()).toBe(true);
    await (await $(card16.expandToggle)).click();
    await expect(await card16.isCollapsed()).toBe(false);
    await (await $(card16.expandToggle)).click();
    await expect(await card16.isCollapsed()).toBe(true);
  });
  it('should verify the <ux-card> is collapsable with uxCardGroupCollapseAll directive', async() => {
    browser.addTestMeta({zephyrStep: "371239"});
    let sectionId = 'isCollapsible-isCollapsed';
    let card17 = page.cardFromSectionWithIdByIndex(sectionId, 3);
    let card18 = page.cardFromSectionWithIdByIndex(sectionId, 4);
    let card19 = page.cardFromSectionWithIdByIndex(sectionId, 5);

    await (await $(page.sectionTitle(sectionId))).scrollIntoView();
    await expect(await card17.isCollapsed()).toBe(false);
    await expect(await card18.isCollapsed()).toBe(true);
    await expect(await card19.isCollapsed()).toBe(true);

    await (await $(page.sectionTitle(sectionId))).scrollIntoView();
    await (await $(card18.expandToggle)).click();
    await expect(await card17.isCollapsed()).toBe(true);
    await expect(await card18.isCollapsed()).toBe(false);
    await expect(await card19.isCollapsed()).toBe(true);
  });
  it('should verify the <ux-card> custom left header', async() => {
    browser.addTestMeta({zephyrStep: "371240"});
    let sectionId = 'content-uxCardHeaderLeftContent';
    let sectionElement = await $(page.sectionById(sectionId));
    await sectionElement.scrollIntoView();
    await expect(sectionElement).toBeDisplayedInViewport({message:'<' + sectionId + '> section -> is not displayed on page'});

    let card = page.cardFromSectionWithIdByIndex(sectionId, 1);
    await expect(await $(card.headerLeftContent)).toBeDisplayedInViewport({message:'CoUxCard - Header Left Custom Content is not visible'});
  });
  it('should verify the <ux-card> custom right header', async() => {
    browser.addTestMeta({zephyrStep: "371241"});
    let sectionId = 'content-uxCardHeaderRightContent';
    let sectionElement = await $(page.sectionById(sectionId));
    await expect(sectionElement).toBeDisplayedInViewport({message:'<' + sectionId + '> section -> is not displayed on page'});
    await sectionElement.scrollIntoView();

    // header
    let card21 = page.cardFromSectionWithIdByIndex(sectionId, 1);
    await expect(await $(card21.header)).toBeDisplayedInViewport({message:'CoUxCard - Header is not visible'});
    await expect(await $(card21.headerRightContent)).toBeDisplayedInViewport({message:'CoUxCard - Header Right Content is not visible'});

    // custom header badge
    let customHeaderBadge = new CoUxBadge(card21.headerRightContent);
    await expect(await customHeaderBadge.isTinier()).toBe(true);
    await expect(await $(customHeaderBadge.currentPath)).toHaveText('important');

    // custom right header actions popup menu
    await expect(await $(card21.headerRightContentLocalMenu)).toBeDisplayedInViewport({message:'CoUxCard - Header Right Content local menu is not visible'});
    await expect(await card21.areActionsDisabled()).toBe(false);

    let uxDropDownBtn = card21.headerRightContentLocalMenuDropdownButtonCo;

    await (await $(page.sectionTitle(sectionId))).scrollIntoView();
    await (await $(uxDropDownBtn.currentPath)).click();
    await expect(await $(uxDropDownBtn.matMenuCO.currentPath)).toBeDisplayedInViewport({message:'<uxDropDownButton> has no mat-menu'});

    let matMenu = page.matMenu;
    let menuItem1 = await $(matMenu.matMenuButtonById(1));
    await menuItem1.moveTo();
    await expect(menuItem1).toHaveText('link 1');
    let menuItem2 = await $(matMenu.matMenuButtonById(2));
    await menuItem2.moveTo();
    await expect(menuItem2).toHaveText('link 2');
    let menuItem3 = await $(matMenu.matMenuButtonById(3));
    await menuItem3.moveTo();
    await expect(menuItem3).toHaveText('disabled link');
    let menuItem4 = await $(matMenu.matMenuButtonById(4));
    await menuItem4.moveTo();
    await expect(menuItem4).toHaveText('link 4');
    await menuItem1.click();

    // custom header status badge
    let badgeCO = page.cardFromSectionWithIdByIndex(sectionId, 2).headerRightContentStatusBadgeCo;
    await expect(await badgeCO.isPill()).toBe(true);
    await expect(await badgeCO.isSmall()).toBe(true);
    await expect(await $(badgeCO.currentPath)).toHaveText('DRAFT');
  });
  it('should verify the <ux-card> isSelectable/isSelected', async() => {
    browser.addTestMeta({zephyrStep: "371243"});
    let sectionId = 'isSelectable-isSelected';
    let sectionElement = await $(page.sectionById(sectionId));
    await sectionElement.scrollIntoView();
    await expect(sectionElement).toBeDisplayedInViewport({message:'<' + sectionId + '> section -> is not displayed on page'});


    let card24 = page.cardFromSectionWithIdByIndex(sectionId, 1);
    await expect(await card24.isSelected()).toBe(true);
    await expect(await card24.isSelectable()).toBe(true);
  });
  it('should verify the <ux-card> isSelectable / isFavouritable / isUrgentable', async() => {
    browser.addTestMeta({zephyrStep: "371244"});
    let sectionId = 'isSelectable-isFavouritable-isUrgentable';
    let sectionElement = await $(page.sectionById(sectionId));
    await sectionElement.scrollIntoView();
    await expect(sectionElement).toBeDisplayedInViewport({message:'<' + sectionId + '> section -> is not displayed on page'});

    let card26 = page.cardFromSectionWithIdByIndex(sectionId, 1);
    await expect(await card26.isSelectable()).toBe(true);
    await expect(await card26.isSelected()).toBe(false);

    await expect(await card26.isFavouritable()).toBe(true);
    await expect(await card26.isFavourite()).toBe(false);

    let favIconCO = card26.headerLeftContentFavouriteIconCo;
    await (await $(page.sectionTitle(sectionId))).scrollIntoView();
    await (await $(favIconCO.currentPath)).click();
    await expect(await card26.isFavourite()).toBe(true);
    await (await $(favIconCO.currentPath)).click();
    await expect(await card26.isFavourite()).toBe(false);

    await expect(await card26.isUrgentable()).toBe(true);
    await expect(await card26.isUrgent()).toBe(false);
    let urgentIconCO = card26.headerLeftContentUrgentIconCo;
    await (await $(urgentIconCO.currentPath)).click();
    await expect(await card26.isUrgent()).toBe(true);
    await (await $(urgentIconCO.currentPath)).click();
    await expect(await card26.isUrgent()).toBe(false);
  });
  it('should verify the <ux-card> has a hideable body', async() => {
    browser.addTestMeta({zephyrStep: "371247"});
    let sectionId = 'isSelectable-isFavouritable-isUrgentable';
    let card27 = page.cardFromSectionWithIdByIndex(sectionId, 2);

   await expect(await $(card27.body)).toHaveText('this is the card content');

    let switchCO = new CoUxSwitch(page.sectionById(sectionId));
    let switchElement = await $(switchCO.currentPath);
    await expect(switchElement).toBeDisplayedInViewport({message:'<uxDropDownButton> has no mat-menu'});
    await switchElement.click();
    await expect(await $(card27.body)).not.toExist({message:'card27 is existing'});
    await switchElement.click();
    await expect(await $(card27.body)).toExist({message:'card27 is not existing'});
  });
});
