import Routing from '../../../../pages/eui/10x/routing-10x.js'
import CookieBannerActions from '../../../../actions/cookieBanner.js'
import EuiDateRangeSelectorPage from '../../../../pages/eui/10x/eui/eui-date-range-selector-10x.po.js'

describe('eUI - <eui-date-range-selector> Component Object ', async () => {
  let dateRangePage = new EuiDateRangeSelectorPage();
  let testFolder = './/eui-date-range-selector//';
  it('should navigate to <eui-date-range-selector> demo page', async () => {
    browser.addTestMeta({uuid:"b56af39f-0c46-4819-b7b6-a086e6fef486", zephyrKey: "CCQA-1298", zephyrStep: "413666", reportGroups: ["eUI.10x.eui"]});
    await dateRangePage.open(Routing.getEUIComponentUrl('eui-date-range-selector'));
    await CookieBannerActions.cookieBanner(true);
    let pgTitle = await $(dateRangePage.pageTitle);
    await pgTitle.scrollIntoView();
    await expect(await $(pgTitle)).toBeDisplayedInViewport({wait:1000,message:'<eui-date-range-selector> page title is not displayed on page'});
    await expect(await $(dateRangePage.appDocPageById('eui-date-range-selector'))).toExist({wait:1000,message:'Page Id is not existing on page'});
    await expect(pgTitle).toHaveText('eui-date-range-selector', {wait:1000,message:'Page title text is not as expected'});
    await expect(await $(dateRangePage.navigationList)).toBeDisplayed({wait:1000,message:'Navigation List -> is not displayed on page'});
  });
  it('should verify the section titles and total number of CO on page', async () => {
    browser.addTestMeta({zephyrStep: "413667"});
    let sectionId = 'Default';
    let section = await $(dateRangePage.sectionById(sectionId));
    await expect(section).toBeDisplayed({wait: 3000, message:'Section ' + sectionId + '-> is not displayed on page'});
    sectionId = 'icon-button';
    section = await $(dateRangePage.sectionById(sectionId));
    await expect(section).toBeDisplayed({wait: 3000, message:'Section ' + sectionId + '-> is not displayed on page'});
    sectionId = 'placeholder';
    section = await $(dateRangePage.sectionById(sectionId));
    await expect(section).toBeDisplayed({wait: 3000, message:'Section ' + sectionId + '-> is not displayed on page'});
    sectionId = 'events';
    section = await $(dateRangePage.sectionById(sectionId));
    await expect(section).toBeDisplayed({wait: 3000, message:'Section ' + sectionId + '-> is not displayed on page'});
    sectionId = 'minDate-maxDate';
    section = await $(dateRangePage.sectionById(sectionId));
    await expect(section).toBeDisplayed({wait: 3000, message:'Section ' + sectionId + '-> is not displayed on page'});
    sectionId = 'reactive-forms';
    section = await $(dateRangePage.sectionById(sectionId));
    await expect(section).toBeDisplayed({wait: 3000, message:'Section ' + sectionId + '-> is not displayed on page'});
    sectionId = 'custom-selection';
    section = await $(dateRangePage.sectionById(sectionId));
    await expect(section).toBeDisplayed({wait: 3000, message:'Section ' + sectionId + '-> is not displayed on page'});
    await chaiExpect(await dateRangePage.dateRangeCo.defaultComponentsCount()).equal(11, 'There should be 11 <eui-date-range-selector> components on the page.');
  });
  it('should verify the <eui-date-range-selector> and mat-Date-Range-Input CO presence', async () => {
    browser.addTestMeta({zephyrStep: "413891"});
    let sectionId = 'Default';
    section = await $(dateRangePage.sectionById(sectionId));
    await section.scrollIntoView();
    let index = 1;
    let co = dateRangePage.dateRangeFromSectionWithIdByIndex(sectionId,index);
    let dateRangeByIndex = await $(co.dataE2E);
    let matDateRangeInput = await (await co.matDateRangeInputCo.element());
    await expect(dateRangeByIndex).toBeDisplayed({wait: 3000, message:'dateRangeByIndex '+ index +' is not displayed on page'});
    await expect(await $(co.dataE2E)).toBeExisting({wait: 3000, message:'<eui-date-range-selector> dataE2E -> is not existing on page'});

    await expect(matDateRangeInput).toBeDisplayed({wait: 3000, message:'<eui-date-range-selector> matDateRangeInput -> is not displayed on page'});
    await expect(await $(co.matDateRangePicker)).toBeExisting({wait: 3000, message:'<eui-date-range-selector> matDateRangePicker -> is not existing on page'});
    await expect(await $(co.selectorTogglerEuiButtonCo.currentPath)).not.toBeExisting({wait: 3000, message:
      '<eui-date-range-selector> selectorTogglerEuiButtonCo -> should not exist in this <eui-date-range-selector> CO'});
    if(browser.config.useWdioImageComparison) {
      await dateRangeByIndex.scrollIntoView();
        await chaiExpect(await browser.checkElement(dateRangeByIndex, testFolder+'img_dateRangeByIndex', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for dateRangeByIndex');
        await matDateRangeInput.scrollIntoView();
        await chaiExpect(await browser.checkElement(matDateRangeInput, testFolder+'img_matDateRangeInput', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for matDateRangeInput');
      }
  });
  it('should verify the <eui-date-range-selector><mat-Date-Range-Input> separator', async () => {
    browser.addTestMeta({zephyrStep: "413892"});
    let sectionId = 'Default';
    section = await $(dateRangePage.sectionById(sectionId));
    await section.scrollIntoView();
    let index = 2;
    let co = dateRangePage.dateRangeFromSectionWithIdByIndex(sectionId, index);
    let separator = await $(co.matDateRangeInputCo.separator);
    await expect(separator).toBeExisting({wait: 3000, message:'<eui-date-range-selector> separator -> is not existing on page'});
    if(browser.config.useWdioImageComparison) {
      await separator.scrollIntoView();
      await chaiExpect(await browser.checkElement(separator, testFolder+'img_separator', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for separator');
    }
    await chaiExpect(await dateRangePage.dateRangeFromSectionWithIdByIndex(sectionId, index).matDateRangeInputCo.isSeparatorHidden()).equal(false, 'isSeparatorHidden from section' + sectionId + ' with index ' + index + ' should be false');
    index = 1
    await chaiExpect(await dateRangePage.dateRangeFromSectionWithIdByIndex(sectionId, index).matDateRangeInputCo.isSeparatorHidden()).equal(true, 'isSeparatorHidden from section' + sectionId + ' with index ' + index + ' should be true');
  });
  it('should verify the <mat-Date-Range-Input> provided data presence', async () => {
    browser.addTestMeta({zephyrStep: "413893"});
    let sectionId = 'Default';
    section = await $(dateRangePage.sectionById(sectionId));
    await section.scrollIntoView();
    let co = dateRangePage.dateRangeFromSectionWithIdByIndex(sectionId, 2);

    let date = new Date();
    let composeDate = ("0" + date.getDate()).slice(-2) + '/' +("0" + (date.getMonth() + 1)).slice(-2)  + '/' + date.getFullYear();
    await expect(await (await $(co.matDateRangeInputCo.startInput)).getValue()).toBe(composeDate);
    await chaiExpect(await (await $(co.matDateRangeInputCo.startInput)).getValue()).equal(composeDate, 'start input doesn\'t have value' + composeDate);
  });
  it('should verify the <eui-date-range-selector> icon-button', async () => {
    browser.addTestMeta({zephyrStep: "413894"});
    let sectionId = 'icon-button';
    section = await $(dateRangePage.sectionById(sectionId));
    await section.scrollIntoView();
    let co = dateRangePage.dateRangeFromSectionWithIdByIndex(sectionId, 1);
    let iconButton = await $(co.selectorTogglerEuiButtonCo.currentPath);
    await expect(iconButton).toBeDisplayed({wait: 3000, message:'<eui-date-range-selector> selector Toggler Eui Button -> is not displayed on page'});

    await (await $(co.selectorTogglerEuiButtonCo.currentPath)).click();
    await expect(await $(dateRangePage.datePickerCo.matCalendarCO.currentPath)).toBeExisting({wait: 3000, message:
      '<eui-date-range-selector> <date Picker Co> <mat Calendar CO> -> is not displayed on page'});
    let matCalendar = await $(dateRangePage.datePickerCo.matCalendarCO.currentPath);
    if(browser.config.useWdioImageComparison) {
      await iconButton.scrollIntoView();
      await chaiExpect(await browser.checkElement(iconButton, testFolder+'img_iconButton', {hideElements: [await $('//eui-app-toolbar')]})).equal(0, 'Image comparison failed for iconButton');
      await matCalendar.scrollIntoView();
      await chaiExpect(await browser.checkElement(matCalendar, testFolder+'img_calendar', {hideElements: [await $('//eui-app-toolbar')]})).within(0, 0.8, 'Image comparison failed for matCalendar');
    }
  });
});
